JQuery Ajax操作

来源：互联网发布：程序员鄙视链图编辑：程序博客网时间：2024/05/17 19:21

JQuery Ajax操作

上回我们谈到Ajax操作分为JS Ajax、JQuery Ajax两种操作，上回具体讲解了JS Ajax操作，今天我们来小谈一下JQ Ajax操作

何为JQ Ajax操作，即JQuery对JS ajax进行了封装，提供了$.ajax()底层操作，也是我们项目中使用最频繁的方法。

同时提供了$.get()..$.post()等快捷操作，方便我们进行请求的处理！

其语法结构是：

$.ajax({            url:"url",// 请求地址            type:"get",            data:{// 传递参数                username:"admin",                password:"123123"            },            dataType:"json",            error:function() {/*请求失败时的操作*/                // 系统超时等错误提示            },            success:function(data){/*请求成功时的回调函数*/                // dom操作，处理数据            }        })        $.get(            "url",            {username:"admin", password:"123"},            function(data){            }        );        $.post(            "url",            {username:"admin", password:"123"},            function(data){            }        );

下面为一个具体JQ Ajax操作案例（注册界面）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>注册界面</title>    <script src="js/lib/jquery2.2.4/jquery-2.2.4.js"></script>    <link rel="stylesheet" href="css/zhuce.css"></head><body>  <div class="total">    <div class="header">        <a href="首页index.html"><img src="images/logon-logo.png" alt=""></a>        <img src="images/V3login-font4.png" alt="">    </div>      <div class="box">        <div class="boxnav">            <span>您好，感谢您加入i百联</span>            <span>如有账号，请点击<a href="登录index.html">登录</a></span>        </div>          <div class="register">              <div class="persondata">                  <div class="message">                            <i>*</i>                      用户名:                  </div>                  <div class="inputbox">                      <input type="text" id="username" placeholder="6-20为字符，支持字母或字母与数字组合">                  </div>              </div>              <div class="persondata">                  <div class="message">                         <i>*</i>                      登录密码:                  </div>                  <div class="inputbox">                      <input type="password" id="password" placeholder="6-20为字符，建议使用数字，字母和符号组合">                  </div>              </div>              <div class="persondata">                  <div class="message">                         <i>*</i>                      确认密码:                  </div>                  <div class="inputbox">                      <input type="password" id="password2" placeholder="请再次输入密码">                  </div>              </div>              <div class="persondata">                  <div class="message">                            <i>*</i>                      手机号:                  </div>                  <div class="inputbox">                      <input type="text" placeholder="请输入十一位手机号码">                  </div>              </div>              <div class="persondata">                  <div class="message">                                                   验证码:                  </div>                  <div class="inputbox">                      <input type="text" placeholder="请输入验证码">                  </div>              </div>              <div class="persondata">                  <div class="message">                      <i>*</i>                      短信验证码:                  </div>                  <div class="inputbox">                      <input type="text" placeholder="请输入短信验证码">                  </div>              </div>              <div class="persondata">                  <div class="message">                                                电子邮箱:                  </div>                  <div class="inputbox">                      <input type="text" placeholder="请输入有效邮箱">                  </div>              </div>          </div>          <div class="agreement">            <i></i><span>我已同意并阅读</span>              <a href="javascript:;">《百联通会员注册协议》</a>              <a href="javascript:;"><p><button id="registbtn">立即注册 完成绑定</button></p></a>          </div>      </div>      <div class="footer">          <a href="javascript:;">关于我们 </a>| <a href="javascript:;">联系我们</a> |           <a href="javascript:;">加盟合作</a> | <a href="javascript:;">诚征英才</a> |           <a href="javascript:;">友情链接</a><br>          上海百联全渠道电子商务有限公司 版权所有 | 沪ICP备15028847号<p></p><p></p>          联系地址：上海市普陀区真光路1258号百联中环广场6楼 | 联系电话：021-52629933 | 咨询热线：400-900-8800<br>          本企业已通过ISO9001:2000 质量管理体系标准认证 | 认证注册号：04206Q10079ROM | 认可注册号：CNAB042-Q | 增值

电信业务经营许可证：沪B2-20100062      </div>  </div>  <script>      $(function () {          $("#registbtn").click(function () {              //获取用户输入的数据              var _unameValue=$("#username").val();              var _passValue=$("#password").val();              var _passValue2=$("#password2").val();              //逻辑判断              if (_passValue!=_passValue2){                  alert("两次输入的密码不一致");                  return;              }              //向服务器发送数据，注册用户              $.ajax({                  url:"http://datainfo.duapp.com/shopdata/userinfo.php",                  type:"get",                  data:{                      status:"register",                      userID:_unameValue,                      password:_passValue                  },                  success:function (response) {                      console.log(response);                      if (response == 0|| response == 2){                          alert("用户名存在，请使用其他账户注册");                      }else{                          alert("恭喜您注册成功，请使用新账户登录");                          location.href="登录index.html";                      }                  },                  error:function () {                      alert("系统繁忙，请稍后再试...");                  }              });          });      });  </script></body></html>

其界面为

当通过接口获取数据成功时执行success函数

其结果为

或者

0 0