php+jQuery+Ajax简单实现页面异步刷新
页面显示如下：
JQueryAjax.html中的代码如下（用的较为简单的$.post）
<html>
<head>
<meta charset="UTF-8">
<title>JQueryAjax+PHP</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
用户名:<input type="text" id="username" name="username" /><br>
密码:<input type="password" id="password" name="password" /><br>
<button type="button" class="butn">ajax提交</button><br>
<span class="con"></span>
<script type="text/javascript">
$(document).ready(function(){
$(".butn").click(function(){
var username = $("#username").val();
var password = $("#password").val();
$.post('ajax.php',{name:username,pwd:password},function(data) {
alert(data);
$(".con").html(data);
})
})
})
</script>
</body>
</html>
ajax.php
<?php echo '用户名:',$_POST['name'],',密码：',$_POST['pwd']."<br>"; //这里可以进行一些操作，比如数据库交互 echo "操作完毕"; ?>
在非json格式下，后台只能返回字符串，如果想后台返回数组，可以采用json格式
例如将JQueryAjax中的代码修改为如下形式：
<html>
<head>
<meta charset="UTF-8">
<title>JQueryAjax+PHP</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
用户名:<input type="text" id="username" name="username" /><br>
密码:<input type="password" id="password" name="password" /><br>
<button type="button" class="butn">ajax提交</button><br>
<span class="con"></span>
<script type="text/javascript">
$(document).ready(function(){
$(".butn").click(function(){
var username = $("#username").val();
var password = $("#password").val();
$.ajax({
url: "ajax.php",
type: "POST",
data:{name:username,pwd:password},
dataType: "json",
error: function(){
alert('Error loading XML document');
},
success: function(data,status){//如果调用php成功
alert(status);
alert(data);
$('.con').html("用户名:"+data[0]+"密码:"+data[1]);
}
});
})
})
</script>
</body>
</html>
ajax.php
<?php
$name = $_POST['name'];
$pwd = $_POST['pwd'];
$array = array("$name","$pwd");
//这里进行一个些操作，比如数据库交互
echo json_encode($array);//json_encode方式是必须的
?>
运行效果如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Ajax实现异步刷新验证用户名是否已存在的具体方法
都是简单的实例,所以直接发代码 静态页面Ajax.html 复制代码 代码如下: <html> <head> <title>Ajax</title> <script type="text/javascript"> function loadXMLDoc() { if (document.getElementById("account
-
asp.net jquery+ajax异步刷新实现示例
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title
-
jQuery ajax请求struts action实现异步刷新
这个样例是用JQuery ajax和struts来做的一个小样例,在这个样例中采用两种方式将java Util中的list转换成支json的格式,第一种是用json-lib.jar这个jar包来转换,第二种是采用goole的gson-2.1.jar来转换,大家可以根据需要导入相应的jar包,在这里为了做测试将两种jar包都导入了.下面开始进入正题 第一步:导入相关jar包,本样例需导入struts相关jar包,json-lib.jar,gson-2.1.jar可以任意选择,但是这里需要都导入,因
-
ajax异步刷新实现更新数据库
上篇文章都是关于界面的东西,下面写关于如何把无刷新的把数据写入到数据库中. 当我们改变某一个人或某几个人的某项分值实现无刷新写入数据库. 首先,我们需要声明XMLHttpRequest对象 复制代码 代码如下: //声明XMLHttpRequest对象 var xmlHttp; function createXMLHTTP() { if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); //Mozilla浏览器 } else if
-
ajaxpro.dll 控件实现异步刷新页面
html代码 复制代码 代码如下: <script type="text/javascript"><!-- function getUserName() { Demo.ajax.GetUserName(document.getElementById("accout").value,getName); } function getName(respone) { document.getElementById("passowrd")
-
如何手写Ajax实现异步刷新
所谓的异步刷新,就是不刷新整个网页进行更新数据. 只有通过js才能实现Ajax,进而实行异步刷新 表单提交数据和Ajax提交数据的区别:表单提交是提交的整个页面中的数据,提交数据之后会抛弃之前的页面(刷新页面):ajax是在当前页面提取某些数据并提交出去,并能接收返回来的数据,处理之后进而显示在当前页面(不刷新页面). [例子]==验证用户名是否重复== 使用Ajax的思路:在要刷新的页面中写js和Ajax代码,把数据提交给另一个页面,在Page_Load中写查询代码并把结果返回到刷新的页面.
-
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
本文实例讲述了jQuery使用$.ajax进行异步刷新的方法.分享给大家供大家参考,具体如下: 最近要用到jquery进行异步读取数据的功能,jquery提供了许多内置的异步读取函数,给大家演示下最常用的$.ajax用法 在客户端文本框输入一个内容,然后在服务器端返回时间 在DEMO中要用到ashx文件,用于获取服务器的信息 效果图片 escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串. 客户端代码 <%@ Page Language="C#" Au
-
php+jQuery+Ajax简单实现页面异步刷新
页面显示如下: JQueryAjax.html中的代码如下(用的较为简单的$.post) <html> <head> <meta charset="UTF-8"> <title>JQueryAjax+PHP</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"
-
jQuery+ajax简单实现文件上传的方法
本文实例讲述了jQuery+ajax简单实现文件上传的方法.分享给大家供大家参考,具体如下: 可以通过ajax来提交表单,而不会刷新页面.主要使用的方法是 $("#formID").ajaxSubmit()方法. 1.要引入js插件 需要下载的附件:jquery.form.js 2.页面代码: <script src="project/js/jquery.form.js" type="text/javascript"></scr
-
jQuery AJAX实现调用页面后台方法
本文实例为大家分享了jQuery AJAX调用页面后台方法,供大家参考,具体内容如下 1.新建demo.aspx页面. 2.首先在该页面的后台文件demos.aspx.cs中添加引用. using System.Web.Services; 1).无参数的方法调用. 大家注意了,这个版本不能低于.net framework 2.0.2.0已下不支持的. 后台代码: [WebMethod] public static string SayHello() { return "Hello Ajax!&q
-
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
1.新建demo.aspx页面. 2.首先在该页面的后台文件demos.aspx.cs中添加引用. using System.Web.Services; 3.无参数的方法调用.大家注意了,这个版本不能低于.net framework 2.0.2.0已下不支持的. 后台代码: 复制代码 代码如下: [WebMethod] public static string SayHello() { return "Hello Ajax!"; } JS代码: 复制代码 代码如下: $(functio
-
jquery ajax 简单范例(界面+后台)
界面: 复制代码 代码如下: <script> $(document).ready(function () { $("#b01").click(function () { htmlobj = $.ajax({ url: "/Content/upFile/测试.txt", async: false }); $("#div01").html(htmlobj.responseText); }); }); $(document).ready(
-
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. (1)通过aspx.cs的静态方法+WebMethod进行处理 简单的介绍下WebMethod方法的用法 1.修饰符主要用public static修饰 2.方法前面加上[WebMethod]属性表明这是WebMethod方法 3.前台html页面(Client端)访问时要使用post方法,和后台.cs文件进行数据交互,否则会返回整个html页面. 4.当后台页面返回数据后
-
jQuery Ajax页面局部加载方法汇总
在jquery中实现ajax加载的方法有很多种,不像以前的js的ajax只有那一种,下面我们介绍jquery ajax实现局部加载方法总结,有需要了解的朋友可参考. 例 $.ajax({ url: "hotelQuery!queryHotelByCity.action", type: "post", dataType: "html", data: "queryHotel.city="+cityobj.value+"&
-
jQuery简单实现页面元素置顶时悬浮效果示例
本文实例讲述了jQuery简单实现页面元素置顶时悬浮效果的方法.分享给大家供大家参考,具体如下: 一.JS Code: <script type="text/javascript"> $.fn.smartFloat = function () { var position = function (element) { var top = element.position().top, pos = element.css("position"); $(wi
-
jquery+Ajax实现简单分页条效果
本文实例为大家分享了jquery+Ajax实现分页条效果的具体代码,供大家参考,具体内容如下 一.如果是jsp页面的话,可以用EL表达式和JSTL标签制作一个分页条,没有什么难度.用EL表达式和JSTL标签实现的缺点就是无法实现异步效果,整个页面是重新刷新了一遍的. 二.如果是普通的html页面,当然是无法使用EL表达式和JSTL标签的,这时只能通过异步Ajax的方式去实现.当然了,JSP页面两种方式都是可以使用的. 三.分页条,这里我是用Ajax和Jquery去做的.实现起来比较繁琐,代码特别