php+jQuery+Ajax简单实现页面异步刷新


Posted in PHP onAugust 08, 2016

页面显示如下: 

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方式是必须的
?>

运行效果如下:

php+jQuery+Ajax简单实现页面异步刷新

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
实现php加速的eAccelerator dll支持文件打包下载
Sep 30 PHP
php 引用(&amp;)详解
Nov 20 PHP
php 文件上传代码(限制jpg文件)
Jan 05 PHP
PHP extract 将数组拆分成多个变量的函数
Jun 30 PHP
PHP eval函数使用介绍
Dec 08 PHP
php轻松实现中英文混排字符串截取
May 28 PHP
使用array_map简单搞定PHP删除文件、删除目录
Oct 29 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
Feb 08 PHP
php转换颜色为其反色的方法
Apr 27 PHP
PHP排序算法类实例
Jun 17 PHP
详解Yii2 rules 的验证规则
Dec 02 PHP
使用PHPMailer发送邮件实例
Feb 15 PHP
常用PHP数组排序函数归纳
Aug 08 #PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
Aug 08 #PHP
PHP 5.6.11中CURL模块问题的解决方法
Aug 08 #PHP
Yii2增删改查之查询 where参数详细介绍
Aug 08 #PHP
微信公众号开发之文本消息自动回复php代码
Aug 08 #PHP
微信公众号开发之语音消息识别php代码
Aug 08 #PHP
PHP+JQuery+Ajax实现分页方法详解
Aug 06 #PHP
You might like
通过对服务器端特性的配置加强php的安全
2006/10/09 PHP
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
PHP程序中使用adodb连接不同数据库的代码实例
2015/12/19 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
Python解析json代码实例解析
2019/11/25 Python
python 实现屏幕录制示例
2019/12/23 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
应届生财务管理求职信
2013/11/06 职场文书
销售演讲稿范文
2014/01/08 职场文书
《小儿垂钓》教学反思
2014/02/23 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
寒山寺导游词
2015/02/03 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
卖车协议书范文
2016/03/23 职场文书
亲情作文之母爱
2019/09/25 职场文书
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫