碼上快樂

相關內容    簡體    繁體

表單和ajax中的post請求&&后台獲取數據方法

本文轉載自   查看原文   2018-03-13 11:08   11694 

版權聲明：本文為博主原創文章，未經博主允許不得轉載。 http://blog.csdn.net/xcymorningsun/article/details/53019425

  最近要做后台數據接收，因為前台傳來的數據太過於混亂，所以總結了一下前台數據post請求方法，順便寫了下相對應的后台接收方法。

        前台主要的contenttype為下面三種：（需要注意的是請求頭中datatype與contenttype的區別，datatype是要求瀏覽器返回的數據格式，這里的contenttype指的是提交的數據格式）

應用情景：

 

  • multipart/form-data類型主要是上傳文件時用到；

  • application/x-www-form-urlencoded類型主要是提交k-v時用到，當然這種方法也可以將json設置在v中提交json數據；

  • application/json類型主要是傳遞json數據用到，層次比較深的數據；
 

 

post提交主要就是依賴於瀏覽器表單提交和ajax方式提交，兩者對這三種方式都可以實現，下面分別介紹這兩類方法：

 


一、Form表單實現（不含后端）


1、application/x-www-form-urlencoded方法

 

[html]  view plain  copy
 
  1. <span style="font-size:14px;"><form action="Handler2.ashx" method="post" enctype="application/x-www-form-urlencoded">  
  2. <p>客戶名稱: <input type="text" name="CustomerName" style="width: 300px" /></p>  
  3. <p>客戶電話: <input type="text" name="CustomerTel" style="width: 300px" /></p>  
  4. <p><input type="submit" value="提交" /></p>  
  5. </form></span>  

 


2、multipart/form-data方法

 

 

[html]  view plain  copy
 
  1.   

<form action="Handler2.ashx" method="post" enctype="multipart/form-data">

<p><input type="text" name="str" value="一個字符串，別管它" /></p> <p>要上傳的文件１<input type="file" name="file1"/></p> <p>要上傳的文件２<input type="file" name="file2"/></p> <p><input type="submit" value="提交" /></p> </form>

 

 

3、json方法

 

    3.1 form表單數據可以直接json序列化var queryArray = $(formElement).serializeArray();

    3.2 也可以在k-v中的v中添加實際值，當然這個違背了form表單多個k-v的初衷，但是也可以實現

 

 

二、ajax實現（含后端）


1、application/x-www-form-urlencoded方法(json與kv)

 

 

[javascript]  view plain  copy
 
  1. var data={     "books": [         { "language":"Java" , "edition":"second" },         { "language":"C++" , "lastName":"fifth" },         { "language":"C" , "lastName":"third" }     ] }  
  2.        $.ajax({  
  3.            type: "post",  
  4.            url: "http://localhost:39870/api/test/getUrlencode",  
  5.            contentType : "application/x-www-form-urlencoded; charset=UTF-8",  
  6.            data: { books: JSON.stringify(data), txtPass: "123" },  
  7.            success: function (res) {  
  8.   
  9.                //alert(res);  
  10.                //layer.close(ii);  
  11.            }  
  12.        });  

 

 

 

后台處理程序

 

 

[csharp]  view plain  copy
 
  1. [HttpPost]  
  2. public IHttpActionResult getFormdata()  
  3. {  
  4.   
  5.     string id = HttpContext.Current.Request["id"];  
  6.     string name = HttpContext.Current.Request["name"];  
  7.   
  8.     return Ok("success2");  
  9. }  


用上述方法既可以獲取簡單的kv數據，也可以自己拼接類json數據，不過其中的數據都是默認在瀏覽器服務器進行url編碼解碼。可以用下面方法實驗得出：

 

 

 

[csharp]  view plain  copy
 
  1. HttpRequest request = HttpContext.Current.Request;  
  2. Stream stream = request.InputStream;  
  3. StreamReader streamReader = new StreamReader(stream);  
  4. string json = string.Empty;  
  5. json = streamReader.ReadToEnd();  
  6. json = HttpUtility.UrlDecode(json);  

 

 

json中未進行urldecode時候數據為：

"books=%7B%22books%22%3A%5B%7B%22language%22%3A%22Java%22%2C%22edition%22%3A%22second%22%7D%2C%7B%22language%22%3A%22C%2B%2B%22%2C%22lastName%22%3A%22fifth%22%7D%2C%7B%22language%22%3A%22C%22%2C%22lastName%22%3A%22third%22%7D%5D%7D&txtPass=123"
進行編碼后數據為：

"books={\"books\":[{\"language\":\"Java\",\"edition\":\"second\"},{\"language\":\"C++\",\"lastName\":\"fifth\"},{\"language\":\"C\",\"lastName\":\"third\"}]}&txtPass=123"

 

2、multipart/form-data方法

 

 

[javascript]  view plain  copy
 
  1. var data = new FormData();  
  2. var files = $("#fileUpload").get(0).files;  
  3.      data.append("id","001");  
  4.      var name={     "books": [         { "language":"Java" , "edition":"second" },         { "language":"C++" , "lastName":"fifth" },         { "language":"C" , "lastName":"third" }     ] };  
  5.      data.append("name",JSON.stringify(name));  
  6.      if(files.length > 0){  
  7.          for (var i = 0; i < files.length;i++){  
  8.              data.append(i.toString(), files[i]);  
  9.          }  
  10.      }  
  11.      $.ajax({  
  12.          type: "post",  
  13.          url: "http://localhost:39870/api/test/getFormdata",  
  14.          contentType: false,  
  15.          cache: false,  
  16.          currentType: false,  
  17.          processData: false,  
  18.          data: data,  
  19.          success: function (res) {  
  20.   
  21.              //alert(res);  
  22.          }  
  23.      });  



 

 

后台獲取數據

 

 

[csharp]  view plain  copy
 
  1. <span style="font-size:14px;">            string id=HttpContext.Current.Request["id"];  
  2.             string name = HttpContext.Current.Request["name"];  
  3.             HttpFileCollection files = HttpContext.Current.Request.Files;  
  4.   
  5.             foreach (string key in files.AllKeys)  
  6.             {  
  7.                 HttpPostedFile file = files[key];  
  8.                 if (string.IsNullOrEmpty(file.FileName) == false)  
  9.                 {  
  10.                       
  11.                     string path = HttpContext.Current.Server.MapPath("~/App_Data/") + file.FileName;  
  12.                     string path2 = HttpContext.Current.Request.Url.Authority+"/" + file.FileName;  
  13.                     string path3 = "C:/Users/xcy/Desktop/金閣寺需求分析/" + file.FileName;  
  14.                     file.SaveAs(path3);  
  15.                 }    
  16.             }</span>  

 

此種方法可以接受kv數據，類json數據和文件，數據並未進行url編碼。可以用下面方法驗證：

 

[csharp]  view plain  copy
 
  1. HttpRequest request = HttpContext.Current.Request;  
  2. Stream stream = request.InputStream;  
  3. StreamReader streamReader = new StreamReader(stream);  
  4. string json = string.Empty;  
  5. json = streamReader.ReadToEnd();  
  6. json = HttpUtility.UrlDecode(json);  

 

 

未進行url編碼的時候json為：

"------WebKitFormBoundaryB4I0wChQCc6LwykM\r\nContent-Disposition: form-data; name=\"id\"\r\n\r\n001\r\n------WebKitFormBoundaryB4I0wChQCc6LwykM\r\nContent-Disposition: form-data; name=\"name\"\r\n\r\n{\"books\":[{\"language\":\"Java\",\"edition\":\"second\"},{\"language\":\"C++\",\"lastName\":\"fifth\"},{\"language\":\"C\",\"lastName\":\"third\"}]}\r\n------WebKitFormBoundaryB4I0wChQCc6LwykM--\r\n"

進行url編碼之后沒有變化，為：

"------WebKitFormBoundaryB4I0wChQCc6LwykM\r\nContent-Disposition: form-data; name=\"id\"\r\n\r\n001\r\n------WebKitFormBoundaryB4I0wChQCc6LwykM\r\nContent-Disposition: form-data; name=\"name\"\r\n\r\n{\"books\":[{\"language\":\"Java\",\"edition\":\"second\"},{\"language\":\"C  \",\"lastName\":\"fifth\"},{\"language\":\"C\",\"lastName\":\"third\"}]}\r\n------WebKitFormBoundaryB4I0wChQCc6LwykM--\r\n"

 

 

3、json方法

 

 

[javascript]  view plain  copy
 
  1. <span style="font-size:14px;">        var data={"books":[{"language":"Java","edition":"second"},{"language":"C++","lastName":"fifth"},{"language":"C","lastName":"third"}]};  
  2.         $.ajax({  
  3.             type: "post",  
  4.             url: "http://localhost:39870/api/test/gettest3",  
  5.             contentType: "application/json; charset=utf-8",  
  6.             cache: false,  
  7.             data: JSON.stringify(data),  
  8.             success: function (res) {  
  9.   
  10.             }  
  11.         });</span>  



 

注意JOSN.stringify()，不添加都會失敗，直接傳的是url編碼后的原字符串。這里插播一下字符串與對象轉換

 

JSON.stringify(obj)將JSON轉為字符串。

JSON.parse(string)將字符串轉為JSON格式

例子：

 

[javascript]  view plain  copy
 
  1. <span style="font-size:14px;">var a={"name":"tom","sex":"男","age":"24"};  
  2.    
  3. var b='{"name":"Mike","sex":"女","age":"29"}';  
  4.    
  5. var aToStr=JSON.stringify(a);  
  6.    
  7. var bToObj=JSON.parse(b);  
  8.    
  9. alert(typeof(aToStr));  //string  
  10.    
  11. alert(typeof(bToObj));//object</span>  

 

看完后就知道為什么要用JSON.stringify(obj)了，因為我們要穿的是字符串，而代碼中data變量原來是js對象，so要變一下啦

而且JSON.stringify()會自動添加轉義符，比如我們在一個字段包含"或者\的時候，如下：

 

[javascript]  view plain  copy
 
  1. var temp={  
  2.     "F_CODE": "001",  
  3.     "F_REGION_CODE": "001",  
  4.     "F_ZTPG": "小\"東哥很'",  
  5.     "F_PGZS": "string",  
  6.     "F_PIC": "string",  
  7.     "F_FILE": "string",  
  8.     "F_TYPE": "string",  
  9.     "F_PROJECT_CODE": "string",  
  10.     "F_TIME": "2017-05-24T03:23:11.555Z"  
  11. };  
  12. var tt=JSON.stringify(temp);  


temp顯示的時候會不顯示轉義符\，當用stringify處理后會的字符串上傳到后端的時候會出現轉義符，使得上傳數據不會出錯

 

后台接收方法

 

3.1

[javascript]  view plain  copy
 
  1. <span style="font-size:14px;">        public IHttpActionResult getTest4([FromBody]object jdata)  
  2.         {  
  3.             //dynamic   
  4.             return Ok("ddd");  
  5.         }</span>  

 

前台的contenttype必須設置為json，此為WebAPI的方式，這種方式添加FromBody這個參數，會針對contenttype為json的post請求自動攔截，如果當contenttype不為json，則會影響后面stream正常獲取，即：如果在上面代碼中添加樓下的代碼，在下面的代碼中是獲取不到json數據的===

 

    3.2

 

[javascript]  view plain  copy
 
  1. <span style="font-size:14px;">            HttpRequest request = HttpContext.Current.Request;  
  2.             Stream stream = request.InputStream;  
  3.             StreamReader streamReader = new StreamReader(stream);  
  4.             string json = string.Empty;  
  5.             json = streamReader.ReadToEnd();</span>  

 

 

這種方法在前兩種的方法中已經提到過，用stream的方式獲取方法比較通用，這個方法是萬能的，v5===

 

后來想了想還是request是王道，其他的好多都是在他基礎上擴展的，目前知道request主要有流和參數獲取兩種

 

===============================================================================================

有小伙伴們問get請求的事兒，順便寫了下

第一種：json對象

 

[javascript]  view plain  copy
 
  1. $(document).ready(function(){  
  2.     var data={  
  3.         "F_CODE": "1",  
  4.         "F_NAME": "xcy"  
  5.     };  
  6.     $.ajax({  
  7.         type: "get",  
  8.         url: "http://localhost:27110/test/formbody",  
  9.         cache: false,  
  10.         data: data,  
  11.         success: function (res) {  
  12.   
  13.         }  
  14.     });  
  15.   
  16. });  

 

第二種：url

 

[javascript]  view plain  copy
 
  1. $(document).ready(function(){  
  2.     $.ajax({  
  3.         type: "get",  
  4.         url: "http://localhost:27110/test/formbody?F_CODE=1&&F_NAME=xcy",  
  5.         cache: false,  
  6.         data: data,  
  7.         success: function (res) {  
  8.   
  9.         }  
  10.     });  
  11.   
  12. });  

 

 

這里一定要將data里面設置為json對象，不要json.stringify加工，這樣才能放到url鏈接后面，不然直接把json字符串放進去了，如下：

http://localhost:27110/test/formbody?{%22F_CODE%22:%221%22,%22F_NAME%22:%22xcy%22}&_=1495087390056

 

后台處理

第一種：與webapi無關

 

[csharp]  view plain  copy
 
  1. <span style="font-size:14px;">            string name = HttpContext.Current.Request["F_CODE"];</span>  

第二種：webapi參數綁定

 

[csharp]  view plain  copy
 
  1. [HttpGet]  
  2. public IHttpActionResult formbody(string F_CODE)  
  3. {  
  4.   
  5.     return Ok(F_CODE);  
  6. }  

 

 

不是很難，注意一點的是get請求不用設置contenttype，因為contenttype是針對body的，既然body沒了，contenttype自然沒效果了。

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 ajax用post模擬提交表單請求&&后台獲取數據方法 ajax--表單和ajax分別使用get、post方法向后台傳輸數據 React 中的 AJAX 請求：獲取數據的方法 express獲取表單get和post請求的 數據 Ajax 通過post提交數據到一般處理程序，后台快速獲取數據的方法 go-web 獲取get/post請求中的請求頭和表單數據 multipart/form-data post 方法提交表單，后台獲取不到數據 ajax請求也可以用form表單向后台提交數據!!!! 【ajax 接收數據】： 從后台獲取數據的方法 ★★★★★★★★ java 后台實現ajax post跨域請求傳遞json格式數據獲取json數據問題
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM