首页 » 博文 » Code » 正文

使用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

<!DOCTYPE HTML>
<HTML>
<HEAD>
    <title>ajax_get demo</title>
    <meta charset="utf-8" />
    <script src="jquery.min.js" ></script>
</HEAD>
<BODY>
<H1>表单</H1>
<form id="ajax_get" >
    用户名: <input type="text" id="username" ><br>
    密&nbsp&nbsp&nbsp码: <input type="'text" id="pwd" ><br>
    <input type="button" value="提交" id="submit1">
</form>
    <script>
               $("#submit1").click(function(){
                 $.get('ajax_get_action.php',{'username':$('#username').val(),'pwd':$('#pwd').val()}, function(data){
                         alert(data);
                 });
               });
        </script>
</BODY>
</HTML>

可以看到在点击事件函数里直接调用$.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。如下:

QQ20160717-0

$.ajax()

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

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

ajax.html

<!DOCTYPE HTML>
<HTML>
<HEAD>
    <title>ajax_get demo</title>
    <meta charset="utf-8" />
    <script src="jquery.min.js" ></script>
</HEAD>
<BODY>
<H1>表单</H1>
<form id="ajax_get" >
    用户名: <input type="text" id="username" ><br>
    密&nbsp&nbsp&nbsp码: <input type="'text" id="pwd" ><br>
    <input type="button" value="提交" id="submit1">
</form>
    <script>
               $("#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('网络错误,稍后再试!');
                       }

                   });
               });
        </script>
</BODY>
</HTML>

后台处理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格式

?>

QQ20160717-1

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

发表评论