首頁  >  文章  >  web前端  >  jQuery如何向伺服器發出get和post請求

jQuery如何向伺服器發出get和post請求

php中世界最好的语言
php中世界最好的语言原創
2018-04-25 14:18:571794瀏覽

這次帶給大家jQuery怎麼會向伺服器發出get和post請求,jQuery向伺服器發出get和post請求的注意事項有哪些,下面就是實戰案例,一起來看一下。

假設有個網站A,它有一個簡單的輸入使用者名稱的頁面,介面上有兩個輸入框,第一個輸入框包含在一個form表單裡用來實現form提交,第二個輸入框是單獨的、沒有包含在form裡,下面就用這兩個輸入框來學習下jQuery的ajax。

1,前端的html和javascript程式碼

頁面html

<main style="text-align: center; margin: 200px auto;">
   <h2>输入用户名</h2>
   <form class="" action="demo01.php" method="post" style="margin-bottom: 20px;">
   <input id="user-name" type="text" name="username" placeholder="请填写您的用户名">
    <input type="submit" name="submit1" value="form提交1" class="input">
   </form>
   <input id="user-name2" type="text" name="username2" placeholder="请填写您的用户名">
   <input type="button" name="submit2" value="ajax提交2">
   <p class="box">
   </p>
  </main>
  <script src="../../js/jquery-3.1.0.min.js"></script>
  <script src="demo.js"></script>

頁面中引入的demo01.js程式碼,注意此處實作的是一個簡單的GET請求

 $(function($) {
  $('input[name=submit2]').on('click', function(e) {
   let username = '';
   if ('' !== (username = $('#user-name2').val())) {
    $.ajax({
     url: `demo.php?name=${username}`,
     dataType: 'json',
     method: 'GET',
     success: function(data) {
      if (data.result == 1) {
       $('.box').html(`<p>你的姓名${username}已成功保存。</p>`);
      }
     },
     error: function(xhr) {
      // 导致出错的原因较多,以后再研究
      alert('error:' + JSON.stringify(xhr));
     }
    })
    .done(function(data) {
     // 请求成功后要做的工作
     console.log('success');
    })
    .fail(function() {
     // 请求失败后要做的工作
     console.log('error');
    })
    .always(function() {
     // 不管成功或失败都要做的工作
     console.log('complete');
    });
   }
  });
 });

jQuery的ajax()方法有兩種寫法,分別是: $.ajax(url [, settings]); 和$.ajax([settings]); 兩種寫法都可以,感覺第一種方法適合用於參數較少的情況,例如,如果只是對一個url做一個簡單的請求,不對傳回的資料、格式和錯誤有要求,只需要傳遞一個url參數就可以,那就可以用第一種寫法。上面的demo01.js中採用的是第二種寫法,下面解釋下參數和相關的函數。

(1)上面程式碼中ajax()的參數

可以看到這裡的參數型別都是javascript物件,也就是都是o = {key: value}; 這種類型的資料。 jQuery的文檔中規定了,這裡的參數只能是PlainObject(物件類型的物件),不能是null、自訂的陣列、或者像docement這種歸屬於某種執行環境(例如瀏覽器)屬於某種類型的對象。這裡不太好說清楚,可以做個小試驗。在命令列裡開啟node repl,進行下測試:

> node
 > typeof(null);
 'object'
 > typeof([]);
 'object'
 > typeof(document);
 'undefined'
 > typeof({});
 'object'

可以看到null、[](陣列類型)、{}(物件類型)都是物件。因為在js中一切皆物件。而在互動式環境中,document則是未定義的變量,所以它的類型是undefined。如果在瀏覽器環境下測試下typeof(document),那麼它的型別也是object。下面逐一解釋下程式碼用到的參數:

url,要請求的url位址,它的值應該是包含url的字串。

dataType,字串。發出請求後,期望從伺服器傳回的資料類型。可以指定的類型有xml、html、script、json、jsonp、text。如果不指定,jquery會基於MIME做判斷,並會回傳一個下面xml、json、script、html當中的一種類型。

method,字串。 HTTP請求方法,預設為GET,上面程式碼中指定為POST。

success, Type: Function( Anything data, String textStatus, jqXHR jqXHR ) ,匿名函數。 HTTP請求成功後要呼叫的函數,可以傳遞三個參數給它:從伺服器傳回的資料(如果上面指定了dataType,則伺服器傳回的資料類型需要與上面dataType指定的類型一致)、一個可以描述狀態的字串textStatus、還有一個jqXHR物件。可以看到上面只傳遞了從伺服器傳回的資料data。

error, Type: Function( jqXHR jqXHR, String textStatus, String errorThrown ) ,匿名函數。 HTTP請求失敗後要呼叫的函數,同樣也可以傳遞三個參數。

除了用到的這些參數,還有許多其他的如:async、dataFilter、mimeType等其他參數,不過現在的這個簡單的腳本還用不到那麼多參數。

(2)「延遲載入函數」

上面程式碼中$.ajax().done().fail().always() jqXHR.done( )、jqXHR.fail()、jqXHR.always()中分別可以加入deferred物件被解析、被拒絕、被解析或被拒絕這三種情況下的要處理的工作,例如新增個函數什麼的。為什麼能夠這麼做呢,這要看$.ajax()回傳了什麼,它回傳的是jqXHR物件(jquery版本大於1.5時)。這個物件實作了Promise interface(Promise機制,用來傳遞非同步操作訊息,代表了某個未來才會知道結果的事件)。這就允許在一次請求中添加多個回調函數,甚至可以在請求完成後新增回調函數。

标题“延迟加载”描述的不够准确,但从效果上看是有延迟加载的效果。关于这个问题更详细的解释可以参考jQuery文档中对jqXHR的解释  或一位前端前辈的解释jQuery的deferred对象详解 。

 2,后端运行在nginx服务器上的php代码

后端的逻辑很简单:我们把前端获取的数据保存到名为data-demo01的文件中,保存成功则向前端返回一个1作为标志。

(1)前端ajax发起GET请求

如果前端的ajax发起的是一个GET请求,那么后端也比较好处理:

  if (isset($_GET['name']) && !empty($_GET['name'])) {
   $username = trim($_GET['name']);
   if (file_put_contents('data-demo01', $username)) {
    echo '{"result": 1}';
   } 
}

(2)前端ajax发起POST请求

js代码中需要修改下ajax()的url、method参数,并增加一个data参数,修改后如下:

 // 相同的代码省略
 $.ajax({
  url: `demo01.php`,
  dataType: 'json',
  method: 'POST',
  data: {"username": username},
 // 相同的代码省略

因为用POST传递数据,所以去掉url中用来传递数据的参数,下面的data类型要与dataType一致,为json格式,然后将username作为值传递。

那么后端的代码也就可以确定了:

 if (isset($_POST['username']) && !empty($_POST['username'])) {
   $username = trim($_POST['username']);
   if (file_put_contents('data-demo01', $username)) {
    echo '{"result": 1}';
   }
  }

如果不出错的话,效果应该是下面这样然后查看下data-demo01,名字果然被保存了。

那么问题来了,如果出错了呢?比如data-demo01文件不可写,或者后台服务器返回的数据格式有错误,或者网络出错。那又该怎么处理呢?我现在也不太清楚,后续再研究吧。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

html直接显示JSON方法详解

PHP操作JSON方法大全

以上是jQuery如何向伺服器發出get和post請求的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn