집 >웹 프론트엔드 >JS 튜토리얼 >jQuery.Ajax()의 데이터 매개변수 유형 예제에 대한 자세한 설명

jQuery.Ajax()의 데이터 매개변수 유형 예제에 대한 자세한 설명

小云云원래의: 2017-12-31 16:17:231773검색

이 글은 주로 jQuery.Ajax()의 데이터 매개변수 유형에 대한 자세한 설명을 소개합니다. 도움이 필요한 친구들이 참고하면 도움이 될 것입니다.

지금 요소를 추가하는 데 사용되는 이러한 양식이 있다고 가정해 보겠습니다.

<form id=&#39;addForm&#39; action=&#39;UserAdd.action&#39; type=&#39;post&#39;>
   <label for=&#39;uname&#39;>用户名</label>：<input type=&#39;text&#39; name=&#39;uname&#39; id=&#39;uname&#39;><br>
   <label for=&#39;mobileIpt&#39;>手机号：</label><input type=&#39;text&#39; name=&#39;mobileIpt&#39; id=&#39;mobileIpt&#39;><br>
   <label for=&#39;birthday&#39;>生日：</label><input type=&#39;text&#39; name=&#39;birthday&#39;><br>
   <input type=&#39;button&#39; value=&#39;提交&#39; onclick=&#39;addUser()&#39;>
</form>

이 요소를 추가하기 위해 양식 제출을 사용하고 싶지 않고 ajax를 사용하여 제출하고 싶습니다.

우리는 다음과 같이 구현하곤 했습니다.

function addUser(){
    var user = {
      uname:$("#uname").val(),
      mobileIpt:$("#mobileIpt").val(),
      birthday:$("#birthday").val()
    };
    $.ajax({
      url:&#39;UserAdd.action&#39;,
      data:user,
      type:&#39;post&#39;,
      dataType:&#39;text&#39;,
      success:function(msg){
        if(msg==&#39;1&#39;){
          console.log(&#39;添加成功&#39;);
        }else{
          console.log(&#39;添加失败&#39;)
        }
      }
       
    })
  }

이렇게 해도 문제는 없지만 폼 요소의 값을 구하는 것이 너무 번거롭습니다.... 여기에는 항목이 3개밖에 없고, 항목이 많으면 쓸모가 없습니다....

어느 날 jquery의 serializeArray 메서드를 발견했습니다.

테이블 요소를 직렬화하고('.serialize()' 메서드와 유사) JSON 데이터 구조 데이터를 반환합니다.

이 메서드는 JSON 문자열이 아닌 JSON 개체를 반환합니다. 문자열화 작업을 위해서는 플러그인이나 타사 라이브러리를 사용해야 합니다.

반환된 JSON 개체는 개체 배열로 구성되며, 각 개체에는 이름 매개변수와 값 매개변수(값이 비어 있지 않은 경우)라는 하나 또는 두 개의 이름-값 쌍이 포함되어 있습니다.

한번 해보자

$(&#39;#addForm&#39;).serializeArray();
//返回数据结构，是json数组，每个对像分别name和value为key，代表这个表单元素的name和value
[
  {"name":"uname","value":""},
  {"name":"mobileIpt","value":""},  
  {"name":"birthday","value":""}
]

이건 유용하지 않은 것 같습니다

JQuery.param() 메서드를 사용하여 처리해 보겠습니다.

var arr = $(&#39;#addForm&#39;).serializeArray();
$.param(arr);
"uname=alice&mobileIpt=110&birthday=1983-05-12"

이제 우리 요구 사항을 충족합니다. 비록 json 형태는 아니지만 최소한 데이터로 업로드할 수는 있습니다.

여기서 ajax 데이터의 json 배열을 직접 채우고 jquery 내부에서 $.param()을 호출하여 처리할 수 있습니다.

jquery.param() 메서드에 대한 설명을 살펴보겠습니다.

반환 값: StringjQuery.param(obj,[traditional])

양식 요소 배열 또는 객체를 직렬화합니다.

Parameters

obj,[traditional]

배열이나 jQuery 객체는 이름/값 쌍에 따라 직렬화되고 일반 객체는 키/값 쌍에 따라 직렬화됩니다.

traditional: 전통적인 얕은 직렬화를 사용할지 여부입니다.

demo:

$.param({uanme:&#39;vic&#39;,mobileIpt:&#39;110&#39;,birthday:&#39;2013-11-11&#39;});
"uanme=vic&mobileIpt=110&birthday=2013-11-11"

설명을 보면 우리와는 관련이 없는 것 같습니다. json 배열로 변경해보겠습니다.

$.param([{uanme:&#39;vic&#39;},{mobileIpt:&#39;110&#39;},{birthday:&#39;2013-11-11&#39;}]);
"undefined=&undefined=&undefined="

이 변환이 실패할 수 있는 이유는 무엇입니까? 우리 양식이 URL 매개변수로 성공적으로 변환될 수 있습니까? jquery 소스 코드를 살펴보겠습니다.

//在ajax()方法中，对json类型的数据进行了$.param()处理
if ( s.data && s.processData && typeof s.data !== "string" ) {
  s.data = jQuery.param( s.data, s.traditional );
}
//param方法中
if ( jQuery.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) {
    // Serialize the form elements
    jQuery.each( a, function() {
      add( this.name, this.value );
    });
  } else {
    // If traditional, encode the "old" way (the way 1.3.2 or older
    // did it), otherwise encode params recursively.
    for ( prefix in a ) {
      buildParams( prefix, a[ prefix ], traditional, add );
    }
  }

이제 이해하셨을 것입니다. json 데이터라면 하나씩 루프를 실행하고 해당 이름 속성과 값 속성만 스플라이스 문자열로 가져옵니다.

일반 개체인 경우 개체의 속성을 반복한 다음 문자열을 연결합니다.

요약:

그래서 이 글에서는 jquery의 ajax 함수에서 3가지 유형의 데이터를

1로 전달할 수 있다는 것입니다. 텍스트:

"uname=alice&mobileIpt=110&birthday=1983-05-12"

2.json 개체:

{uanme:&#39;vic&#39;,mobileIpt:&#39;110&#39;,birthday:&#39;2013-11-11&#39;}

3.json array:

[
  {"name":"uname","value":"alice"},
  {"name":"mobileIpt","value":"110"},  
  {"name":"birthday","value":"2012-11-11"}
]

따라서 한 번의 클릭으로 양식을 받아 제출할 수 있어 매우 편리합니다. 보충: 실제로 양식 데이터를 추출하려면 "uname=alice&mobileIpt=110&birthday=1983-05-12""과 같은 serialize() 메소드만 직접 얻으면 됩니다.

jQuery.Ajax()의 데이터 매개변수 유형 예제에 대한 자세한 설명

관련 기사