Ajax+php数据交互并且局部刷新页面的实现详解

什么是Ajax？

国内翻译常为“阿贾克斯”和阿贾克斯足球队同音，AJAX 是一种用于创建快速动态网页的技术，他不是新语言，而是一种使用现有标准的新方法。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新，这样就可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

XMLHttpRequest 是 AJAX 的基础，用于和服务器交换数据。所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）

下面这篇文章主要介绍的是利用ajax实现与php数据交互，并局部刷新页面的相关内容，下面话不多说，来一起看看详细的介绍：

一、语法简介

1.1 ajax基本语法

$.ajax({
 type: "post",        //数据提交方式（post/get）
 url: "http://xxx/test/demo.php",   //提交到的url
 data: {username:username,password:password},//提交的数据
 dataType: "json",       //返回的数据类型格式

 success: function(msg){
  ...//返回成功的回调函数
 },

 error:function(msg){
  ...//返回失败的回调函数
 }
});

1.2 php端的接收方法

<!--?php
 $username=$_POST['username']; //接收以post方式提交来的username数据
 $password=$_POST['password'];
?>

二、示例详解

2.1 html端代码demo.html

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>ajaxTest</title>
</head>
<body>
 <input type="text" id="username">
 <input type="text" id="password">
 <button id="sub">查询</button>
 <span id="text"></span><!-- 用以显示返回来的数据，只刷新这部分地方 -->
</body>
<script src="https://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
</html>

2.2 在demo.html中加入以下js代码

<script>
 $(function(){
 $('#sub').click(function(){
  var username=$('#username').val();
  var password=$('#password').val();
  $.ajax({
  type: "post",
  url: "http://xxx/test/demo.php",
  data: {username:username,password:password}, //提交到demo.php的数据
  dataType: "json", //回调函数接收数据的数据格式

  success: function(msg){
   $('#text').empty(); //清空Text里面的所有内容
   var data='';
   if(msg!=''){
   data = eval("("+msg+")"); //将返回的json数据进行解析，并赋给data
   }
   $('#text').html("用户名为：" + data.username + ",密码为：" + data.password); //在#text中输出
   console.log(data); //控制台输出
  },

  error:function(msg){
   console.log(msg);
  }
  });
 });
 })
</script>

2.3 php端代码demo.php

<!--?php
 header('Content-type:text/json;charset=utf-8');
 $username=$_POST['username'];
 $password=$_POST['password'];

 $data='{username:"' . $username . '",password:"' . $password .'"}';//组合成json格式数据
 echo json_encode($data);//输出json数据
?>

三、最终效果如下

demo下载地址

下载demo

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • Ajax异步传输与PHP实现交互示例

    背景 前台页面两个select框,一个与学院关联,另一个与专业关联,现需要选择学院select框后,显示学院相关信息,且专业select下面仅有属于该学院的专业名称.也就是实现一个二级联动效果. 两个select里面分别定义onchange事件,事件中利用ajax的GET方法向后台PHP递交信息,再将查询得到的信息echo出来或document.write. 注:代码参考了有位叫y0umer的博主写的. 复制代码 代码如下: <script type="text/javascript&qu

  • php+ajax实现无刷新分页的方法

    本文实例讲述了php+ajax实现无刷新分页的方法.分享给大家供大家参考.具体实现方法如下: 这是一款基于原生态的php +js +ajax 的分页程序实例,我们详细的从数据库创建到js,php,html页面的创建来告诉你如何实现ajax分页调用数据的方法. 具体步骤如下: 一.创建数据库 SQL语句如下: 复制代码 代码如下: CREATE TABLE `tb_user` (   `id` int(10) NOT NULL auto_increment,   `username` varcha

  • php+ajax实现无刷新动态加载数据技术

    我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术.我们发现很多网站用到这种技术,必应图片搜索.新浪微博.QQ空间等将该技术应用得淋漓尽致. 滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后台PHP程序,返回相应的数据,并将返回的数据追加到页面底部,从而实现了动态加载,其实就是一个典型的Ajax应用.本文将使用jQuery,结合PHP,mysql以及JS

  • php ajax无刷新上传图片实例代码

    AJAX 客户端页面代码: index.html 复制代码 代码如下: <html> <body> <h1>Ajax file upload sample</h1><br/><input id="uplaod" name="btn_send" type="button" value="上传测试"/> <div id=result></di

  • Ajax+PHP简单数据交互

    Ajax+PHP简单数据交互

    PHP是一种创建动态交互性站点的服务器端脚本语言,优势:PHP脚本语言应用广泛,开源免费,最重要的是入门简单,容易掌握. PHP能够生成动态页面内容 PHP能够创建.打开.读取.写入.删除以及关闭服务器上的文件 PHP能够接收表单数据 PHP能够发送并取回cookies PHP能够添加.删除.修改数据库中的数据 PHP能够限制用户访问网站中的某些页面 能够运行于各种平台,几乎兼容所有WEB服务器,支持多种数据库 1.我们想要运行PHP,首先要有个web服务器,一般可以在本地部署一个服务器用来测试

  • PHP+ajax 无刷新删除数据

    首先本例基于留言本整理版修改. 我们使用了jquery.js来实现ajax和dom删除 首先加入 复制代码 代码如下: <script type="text/javascript" src="lib/jquery.js"></script> 给table加个 复制代码 代码如下: id="t<!--{$item.id}-->" 写个js: 复制代码 代码如下: <script> function d

  • php+ajax实时刷新简单实例

    本文实例讲述了php+ajax实时刷新简单实现方法,分享给大家供大家参考.具体如下: ajax自动刷新好像是个很常见的问题,之前做一个网页聊天室程序也是卡在了这上面,经过了这段时间的学习,终于做出了一个可以自动刷新网页的代码框架,希望正在迷茫的亲们不要像我一样走了这么多弯路 废话不多说 上代码: html部分: <html> <head> <script type="text/javascript"> function loadXMLDoc()//a

  • Ajax+php数据交互并且局部刷新页面的实现详解

    Ajax+php数据交互并且局部刷新页面的实现详解

    什么是Ajax? 国内翻译常为"阿贾克斯"和阿贾克斯足球队同音,AJAX 是一种用于创建快速动态网页的技术,他不是新语言,而是一种使用现有标准的新方法.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新,这样就可以在不重新加载整个网页的情况下,对网页的某部分进行更新. XMLHttpRequest 是 AJAX 的基础,用于和服务器交换数据.所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject) 下面这篇文章主

  • Android中使用的定时针(刷新页面请求服务器)详解

    我要在程序中用到5秒请求一下数据(不建议大家这样做,我的需求是这样) 代码展示: 1.在OnCreate中创建定时针Timer //每5秒请求一次服务器 timer=new Timer(); timer.scheduleAtFixedRate(new TimerTask() { @Override public void run() { Message message=new Message(); message.what=1; handler.sendMessage(message); } }

  • ASP.NET使用ajax实现分页局部刷新页面功能

    listview列表实现分页是非常容易的.ListView分页是非常简单的,加上一个DataPager控件,把ListView的ID赋予就可以了.最开始我就是这么写的.(网上有人说这样是伪分页?) <asp:ListView ID="newBlogItems" runat="server" DataSourceID="AccessDataSource1" ViewStateMode="Disabled"> <

  • jsp实现局部刷新页面、异步加载页面的方法

    局部刷新页面.异步加载页面方案: 1.在jsp页面需要刷新的地方增加一个控件 <div id=courseList></div> 2.新建一个jsp页面:aaa.jsp(用来放置需要刷新的内容) 3.将id为courseList的dom标签重新赋值为需要的页面,就能达到局部刷新的目的 $('#courseList').html(msg); 例如: $.ajax({ dataType:"text", url:basePath+'/courseList', data

  • Flask框架运用Ajax实现数据交互的示例代码

    目录 前后端发送字符串 前后端发送JSON数据 发送数据并携带token 收发JSON格式字符串 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载刷新整个页面,这使得程序能够更快地回应用户的操作,如下笔记将简单介绍使用AJAX如何实现前后端数据通信. 前后端发送字符串 前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

  • Django中使用jquery的ajax进行数据交互的实例代码

    Django中使用jquery的ajax进行数据交互的实例代码

    jquery框架中提供了$.ajax.$.get.$.post方法,用于进行异步交互,由于Django中默认使用CSRF约束,推荐使用$.get 示例:实现省市区的选择 最终实现效果如图: 将jquery文件拷贝到static/js/目录下 打开booktest/views.py文件,定义视图area1,用于显示下拉列表 #提供显示下拉列表的控件,供用户操作 def area1(request): return render(request,'booktest/area1.html') 打开bo

  • Ajax实现带有验证码的局部刷新登录界面

    Ajax实现带有验证码的局部刷新登录界面

    现在的登录界面大多数都带有:验证码的功能+验证码局部刷新+ajax登录.用ajax登录的好处最明显就是速度快,URL地址没有变化.所有现在登录功能很少再用form表单post提交了,大多数都已经采用了ajax局部访问后台然后解析返回值并显示结果到界面上面.理论还是要拿来实践才能验证的,下面直接上代码. 运行界面: 1.验证码后台访问部分上一篇博客已经介绍多了,这里介绍如何利用img中src实现局部刷新验证码的功能. html部分: <p><label class="lbrigh

  • vue列表数据删除后主动刷新页面及刷新方法详解

    vue列表数据删除后主动刷新页面及刷新方法详解

    问题描述: 前端删除一条数据或者新增数据后,后端操作成功,但前端不会自动刷新,需要重新刷新当前页面 (用vue-router重新路由到当前页面,页面是不进行刷新的 ,采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载) 解决: provide / inject 组合 作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效. (声明reload方法,控制router-view的显示或隐藏,从而控制页

  • vue axios数据请求get、post方法及实例详解

    我们常用的有get方法以及post方法,下面简单的介绍一下这两种请求方法 vue中使用axios方法我们先安装axios这个方法 npm install --save axios 安装之后采用按需引入的方法,哪个页面需要请求数据就在哪个页面里引入一下. import axios from 'axios' 引入之后我们就可以进行数据请求了,在methods中创建一个方法 methods:{ getInfo(){ let url = "url" axios.get(url).then((r

  • 微信小程序开发数据缓存基础知识辨析及运用实例详解

    提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容. 提示:以下是本篇文章正文内容,下面案例可供参考 一.微信数据缓存是什么? 在实际开发中,在用到一个数据时,我们需要调用api接口去得到,然后渲染在页面中,但是对于一些数据,是经常需要使用的,如果每次使用时都需要调用api接口,会十分麻烦.数据缓存就解决了这个问题,我们可以在初次调用某api得到数据的同时将数据缓存,那么在之后的使用过程

随机推荐