Ajax php数据交互和本地刷新页面实现细�

什么是Ajax？

国内翻译往往是“Ajax”和AJAX足球队是同音异义词。Ajax是一种用于创建快速动态网页的技术。它不是一种新的语言，而是一种使用现有标准的新方法。通过在后台与服务器交换少量数据，AJAX可以让网页异步更新，这样就可以在不重装整个网页的情况下更新网页的某一部分。

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

下面的文章主要介绍如何使用ajax与php数据进行交互，并在本地刷新页面的相关内容。下面就不多说了，我们来看看详细的介绍：

语法简介

1.1 ajax基本语法

$.ajax({ type: 'post '，//数据提交方法(post/get)URL 3360 ' http://XXX/test/demo . PHP '，//提交到URL data 3360 { username 3360 username，password : password}，//提交数据dataType: 'json '，//返回数据类型格式success 3360 function(msg){ 0.//返回成功的回调函数}，错误： function(msg){ 0.//返回失败的回调函数} })；1.2 php接收方法

！- ?PHP $ username=$ _ POST[' username ']；//接收POST提交的用户名数据$ password=$ _ POST[' password ']；二、例题详解

2.1 html结束代码demo.html

！doctype html lang=' en ' head metachartset=' utf-8 ' title Ajax test/title/head body input type=' text ' id=' username ' input type=' text ' id=' password ' button id=' sub ' query/button span id=' text '/span！-用于显示返回的数据并仅刷新此部分-/body script src=' http://cdn . bootscs.com/jquery/3 . 0 . 0-alpha 1/jquery . min . js '/script/html 2.2将以下js代码添加到demo.html

script $(function(){ $('#sub ')。单击(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 '。//回调函数接收数据格式成功3360函数(msg) {$ ('# text ')。empty()；//清空文本中的所有内容。var数据=' '；如果(味精！=' '){ data=eval('(' msg '))；//解析返回的json数据，并将其分配给data} $('#text ')。html('用户名：' data.username '，密码：' data . password ')；//输出console.log(数据)在# text//控制台输出}，错误：函数(msg){ console . log(msg)；} });});})/script2.3 php侧码demo.php

！- ?php头(' Content-type : text/JSON；charset=utf-8 ')；$ username=$ _ POST[' username ']；$ password=$ _ POST[' password ']；$data='{username: ' '。$username。password: ' '。$password。'}';//组合成json格式数据echo JSON _ encode($ data)；//输出json数据？三、最终效果如下

演示下载地址

下载演示

摘要

以上就是本文的全部内容。希望本文的内容能给你的学习或工作带来一些帮助。有问题可以留言交流。谢谢你的支持。