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 相关文章推荐
动态生成gif格式的图像要注意?
Oct 09 PHP
linux下为php添加curl扩展的方法
Jul 29 PHP
ThinkPHP模板引擎之导入资源文件方法详解
Jun 18 PHP
PHP+iFrame实现页面无需刷新的异步文件上传
Sep 16 PHP
php几个预定义变量$_SERVER用法小结
Nov 07 PHP
PHP中开启gzip压缩的2种方法
Jan 31 PHP
php实现字符串翻转的方法
Mar 27 PHP
CodeIgniter表单验证方法实例详解
Mar 03 PHP
php实现微信公众平台发红包功能
Jun 14 PHP
PHP回调函数简单用法示例
May 08 PHP
laravel开发环境homestead搭建过程详解
Jul 03 PHP
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
Apr 01 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表单提交问题的解决方法
2011/04/12 PHP
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
Laravel事件监听器用法实例分析
2019/03/12 PHP
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
微信小程序实现文件预览
2020/10/22 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
python数据结构之二叉树的遍历实例
2014/04/29 Python
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
Python多线程同步Lock、RLock、Semaphore、Event实例
2014/11/21 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
Python pandas如何向excel添加数据
2020/05/22 Python
如何导出python安装的所有模块名称和版本号到文件中
2020/06/05 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
办公室驾驶员岗位职责
2013/11/15 职场文书
高一历史教学反思
2014/01/13 职场文书
优秀士兵先进事迹
2014/02/06 职场文书
2014年安全生产目标责任书
2014/07/23 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers