简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 12月25日_ JQuery里的ajax提交 - 九期线上班
Blogger Information
Blog 34
fans 0
comment 0
visits 21827
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
12月25日_ JQuery里的ajax提交 - 九期线上班
只猫
Original
664 people have browsed it

JQuery中的ajax

form表单默认提交方式为get
客户端请求 服务器 响应 包含 响应头和响应体

使用ajax提交就不让form提交 取消form的提交属性action和method 。把button改为type=”button” 。

异步请求，不刷新当前页面的情况下把数据提交到服务端。

$.post和$.get 这二者最为常用

习惯用于$.post()提交数据 $.get()获取数据

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>ajax</title>
  6.     <script src="jquery.js"></script>
  7. </head>
  8. <body>
  9.     <form>
  10.         <div>
  11.         <label for="username">用户：</label>
  12.         <input type="text" name="username" placeholder="请输入用户名">
  13.         </div>
  14.         <div>
  15.         <label for="pwd">密码：</label>
  16.         <input type="password" name="pwd" placeholder="请输入用密码">
  17.         </div>
  18.         <button type="button" onclick="login1()">登陆post</button>
  19.         <button type="button" onclick="login2()">登陆get</button>
  20.         <div class="std"></div>
  21.     </form>
  22.     <script type="text/javascript">
  23.     function login1() {
  24.         var username = $.trim($('input[name="username"]').val());
  25.         var pwd = $.trim($('input[name="pwd"]').val());
  26.         //jQuery.post( url [, data ] [, success ] [, dataType ] ) 
  27.         //4个参数 
  28.         //1.提交地址(当前地址，相对地址) 
  29.         //2.提交数据(字符串或者对象)
  30.         //3.回调函数
  31.         //4.响应 数据解析类型
  32.         $.post('login.php',{name:username,pass:pwd},
  33.             function(res){
  34.                 console.log(res.msg);
  36.                 if(res.code==0){
  38.                     alert(res.msg);
  39.                     window.location.href = "home.php";
  40.                 }
  41.             },'json');
  42.         }
  44.         //get方式 提交数据(大小有限)
  45.         //jQuery.get( url [, data ] [, success ] [, dataType ] )
  46.         function login2(){
  47.             var username = $.trim($('input[name="username"]').val());
  48.         var pwd = $.trim($('input[name="pwd"]').val());
  50.         $.get('login.php',{name:username,pass:pwd},function(res){
  51.                 console.log(res.msg);
  53.                 if(res.code==0){
  55.                     alert(res.msg);
  56.                     window.location.href = "home.php";
  57.                 }
  58.             },'json');
  59.         }
  61.         //get方式获取数据
  63.         $.post('home.php',function(res){
  64.             var html = '';
  65.             $.each(res.data,function(i,v){
  66.                 html+='<p>学号：'+v.sno+'===姓名：'+v.name+'</p>';
  67.                 $('div[class="std"]').html(html);
  68.                 });    
  69.             },'json');
  71.     </script>
  72. </body>
  73. </html>

login.php

  1. <?php
  2. $method = $_SERVER['REQUEST_METHOD'];
  3. if($method=='GET'){
  4.     $username = $_GET['name'];
  5.     $password = $_GET['pass'];
  6. }else{
  7.     $username = $_POST['name'];
  8.     $password = $_POST['pass'];
  9. }
  11. //状态码code 消息msg 数据data
  12. if($username!='admin'){
  13.     $data = json_encode(array('code'=>1,'msg'=>'用户名错误'));
  14.     exit($data);
  15. }
  17. if($password!='1234'){
  18.     $data = json_encode(array('code'=>1,'msg'=>'密码错误！'));
  19.     exit($data);
  20. }
  22. $data = json_encode(array('code'=>0,'msg'=>'登陆成功'));
  23. exit($data);

home.php

  1. <?php
  2. // echo 'home';
  4. $person = [
  5.             [
  6.                 'id'=>1,
  7.                 'name'=>'小明',
  8.                 'sno'=>'00001',
  9.             ],
  11.             [
  12.                 'id'=>2,
  13.                 'name'=>'小六',
  14.                 'sno'=>'12345',
  15.             ],
  17.             [
  18.                 'id'=>3,
  19.                 'name'=>'张三',
  20.                 'sno'=>'00003',
  21.             ],
  22.         ];
  24. $data = json_encode(
  25.         array(
  26.             'code'=>0,
  27.             'msg'=>'success',
  28.             'data'=>$person,
  29.         ));
  31. exit($data);

总结：在使用$.get()获取home.php页面的数据时，感觉踩了坑，回调函数里console.log()输出不了东西，但是network里面数据正常，我开始以为回调里没法显示在console，不对啊，老师视频里就可以打印出来。发现是我的回调没执行，我又把数据放到login.php去请求login.php，结果可以打印，我就以为难道一个html页面里只能调用一个php？想想也不可能啊。。最后发现是我在home页面开头echo了个home导致。echo是可以打断控制台输出的是吗？新手写代码太难了，脑子里的想法真奇奇怪怪。
JQuery的方法不去用会忘的很快，学完一遍只是理解了，根本不是记住了，更不等于灵活运用。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：ajax虽然不是什么新技术 , 却支撑起了现代web开发框架
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！