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 相关文章推荐
其他功能
Oct 09 PHP
phpwind中的数据库操作类
Jan 02 PHP
用来给图片加水印的PHP类
Apr 09 PHP
PHP 采集程序 常用函数
Dec 18 PHP
PHP SQLite类
May 07 PHP
php读取mysql中文数据出现乱码的解决方法
Aug 16 PHP
php的慢速日志引起的Mysql错误问题分析
May 13 PHP
php使用Cookie实现和用户会话的方法
Jan 21 PHP
微信公众平台开发实现2048游戏的方法
Apr 15 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
Mar 03 PHP
PHP生成图片缩略图类示例
Jan 12 PHP
Yii框架日志操作图文与实例详解
Sep 09 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
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
php操作mysqli(示例代码)
2013/10/28 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
2017/09/18 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
netbeans7安装python插件的方法图解
2013/12/24 Python
Python程序设计入门(1)基本语法简介
2014/06/13 Python
使用graphics.py实现2048小游戏
2015/03/10 Python
利用python画一颗心的方法示例
2017/01/31 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
Django缓存Cache使用详解
2020/11/30 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
师范生的个人求职信范文
2014/01/04 职场文书
客户表扬信范文
2014/01/10 职场文书
幼儿园教师培训方案
2014/02/04 职场文书
蜜蜂引路教学反思
2014/02/04 职场文书
工地安全检查制度
2014/02/04 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
营销经理工作检讨书
2014/11/03 职场文书
委托书英文
2015/01/28 职场文书
联谊会开场白
2015/06/01 职场文书
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android