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 adodb分页实现代码
Mar 19 PHP
php多维数组去掉重复值示例分享
Mar 02 PHP
PHP的PDO操作简单示例
Mar 30 PHP
PHP设计模式之迭代器模式
Jun 17 PHP
php实现批量修改文件名称的方法
Jul 23 PHP
Linux下快速搭建php开发环境
Mar 13 PHP
YII2框架中使用yii.js实现的post请求
Apr 09 PHP
thinkphp分页集成实例
Jul 24 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
Nov 14 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
Aug 16 PHP
php 防护xss,PHP的防御XSS注入的终极解决方案
Apr 01 PHP
详解thinkphp的Auth类认证
May 28 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设计模式 Decorator(装饰模式)
2011/06/26 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
如何在PHP中使用数组
2020/06/09 PHP
jquery获取input表单值的代码
2010/04/19 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
js实现时分秒倒计时
2019/12/03 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
手把手教你如何编译打包video.js
2020/12/09 Javascript
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
Keras搭建自编码器操作
2020/07/03 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
上海某公司.net方向笔试题
2014/09/14 面试题
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
积极贯彻学习两会精神总结
2014/03/17 职场文书
《白鹅》教学反思
2014/04/13 职场文书
商务日语专业自荐信
2014/04/17 职场文书
英语求职信范文
2014/05/23 职场文书
工业设计专业自荐书
2014/06/05 职场文书
中学生检讨书1000字
2014/10/28 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
Python实现列表拼接和去重的三种方式
2021/07/02 Python
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python
详解Python flask的前后端交互
2022/03/31 Python
从结婚开始的恋爱故事。小说《我的美好婚事》TV动画化决定
2022/04/07 日漫