php处理ajax请求jQuery,使用Jquery发出Ajax请求和PHP处理Ajax请求

哀差闷在搞一个管理系统，leader给了一套前端模板，需要自己去修改适应业务需要，并且实现相应的功能，其中在Ajax提交时遇到了困难，虽然请教了团队里的前端大神，但是还是一知半解。于是好好学习了下Jquery的Ajax提交的方法，这里总结下。

Jquery提供的Ajax方法常见的有：$.get() ,$.post, $.ajax()。这里哀差闷就这三种方法给出一些简单的例子，和在实际使用的过程中遇到的一些问题。其实主要三个问题没弄清楚：1.如何提交Ajax请求、2.后台如何处理Ajax提交的数据并返回一些数据、 3.Js如何处理Ajax返回的数据。

$.get()

弄一个简单的表单提交作为示例

$.get()函数有四个参数，可以参考http://jquery.cuishifeng.cn/jQuery.get.html

前端页面ajax_get.html

ajax_get demo

表单

用户名:

密&nbsp&nbsp&nbsp码:

$("#submit1").click(function(){

$.get('ajax_get_action.php',{'username':$('#username').val(),'pwd':$('#pwd').val()}, function(data){

alert(data);

});

});

可以看到在点击事件函数里直接调用$.get()函数，一个参数指定了处理Ajax请求的地址，第二个参数为提交给服务器的数据，第三个参数为回调函数(即用来处理Ajax返回的数据)

后台处理程序ajax_get_action.php<?php

$username = $_GET['username'];

$pwd = $_GET['pwd'];

echo '用户名: '.$username.'\n'.'密码 '.$pwd;

可以看到，很简单的echo出来的是内容会被Ajax返回给js来处理，在$.get()的第三个参数-回调函数中有个参数data，则后台处理程序echo出来的数据会交给data。如下：

$.ajax()

$.post()方法和$.get()方法使用的情况及其相似，只是在后台处理的时候，需要需要使用$_POST取得Ajax提交过来的数据。所以就不在介绍$.post()方法了。

$.ajax()是最强大的方法，既可以实现post提交数据也可以实现get提交数据。还有需要的强大的功能可以参考http://jquery.cuishifeng.cn/jQuery.Ajax.html

ajax.html

ajax_get demo

表单

用户名:

密&nbsp&nbsp&nbsp码:

$("#submit1").click(function(){

/* console.log("点击事件生效!");

$.get('ajax_get_action.php',{'username':$('#username').val(),'pwd':$('#pwd').val()}, function(data){

alert(data);

});*/

//首先定义一个数组

data = {};

data.username = $('#username').val();

data.pwd = $('#pwd').val();

console.log(data);

$.ajax({

url: 'respond.php', //指定处理后台处理程序的路径

type: 'post', //提交方式

contentType: 'application/x-www-form-urlencoded',

dataType: 'json', //指定服务器返回的数据格式

data: data, //提交给服务器的数据

success: function(data){ //成功时的回调函数

console.log(data);

if(data.flag == 0) {

alert(data.msg);

}else{

alert("出现未知错误,稍后再试!");

}

},

error: function(){ //请求失败时执行

alert('网络错误,稍后再试!');

}

});

});

后台处理respond.php<?php

$user = $_POST['username'];

$pwd = $_POST['pwd'];

/*********此处检查用户名密码是否正确,假设是成功的*********/

$msg = 'Welcome '.$user;

$respond = array(

'flag' => 0,

'msg' => $msg,

'data' => true,

);

echo json_encode($respond); //$.ajax已经指定了服务器返回的数据为json格式

?>

记录一个问题，由于使用PHPStorm内置的浏览器，来测试程序，发现使用POST方式后台怎么也取不到数据，使用GET的方式就没有问题，搞了好长的时间，终于找到了原因，原来是PHPstorm内置的浏览器是FastCGI模拟出来的，没有$_POST。详细情况可以看看https://segmentfault.com/q/1010000005734863