집 > 기사 > 웹 프론트엔드 > jQuery 양식 직렬화 예제 코드 예제 공유

jQuery 양식 직렬화 예제 코드 예제 공유

小云云원래의: 2018-01-10 09:26:501442검색

이 글은 주로 jQuery 양식 직렬화 예제 코드를 소개합니다. 필요한 친구들은 이를 참고하여 jQuery 양식 직렬화 지식을 더 잘 익힐 수 있기를 바랍니다.

더 이상 말도 안되는 코드를 게시하겠습니다. 구체적인 코드는 다음과 같습니다.

$(function(){
  $(&#39;#send&#39;).click(function(){
     $.ajax({
       type: "GET",
       url: "test.json",
       data: {username:$("#username").val(), password:$("#password").val()}, // 参数为对象
       dataType: "json",
       success: function(data){
          // code...   
       }
     });
  });
});
$(function(){
  $(&#39;#send&#39;).click(function(){
    var username = $("#username").val();
    var password = $("#password").val();
    $.ajax({
      type: "GET",
      url: "test.json",
      data: "username"+username+"&password"+password, // 参数为字符串拼接，并用&连接
      dataType: "json",
      success: function(data){
        // code...
      }
    });
  });
});

위는 데이터 매개변수의 두 가지 전송 형식을 나열하는 일반 Ajax 요청 코드입니다.

Ajax 요청 중에 데이터 매개변수 획득을 용이하게 하기 위해 jquery는 몇 가지 빠른 방법을 정의합니다.

1.serialize()

사용법: var data = $("form").serialize();

반환 값: 양식 콘텐츠를 문자열로 직렬화합니다.

　이렇게 하면 ajax를 통해 양식 데이터를 제출할 때 모든 매개변수를 하나씩 나열할 필요가 없습니다. 데이터 매개변수를 $("form").serialize()로 설정하기만 하면 됩니다.

핵심 메소드는 키/값에 따라 배열 또는 객체를 직렬화하는 데 사용되는 $.param()입니다.

var obj = {first: "one", last: "two"}
var str = $.param(obj);
console.log(str); // first=one&last=two

또한 serialize를 사용하면 중국어 컴파일 처리가 가능하다는 장점이 있습니다. 따라서 직렬화를 사용하는 것이 좋습니다.

2.serializeArray()

사용법: var jsonData = $("form").serializeArray();

반환 값: 페이지 양식을 JSON 구조(키-값 쌍) 개체로 직렬화합니다.

　예를 들어 [{"name":"lihui", "age":"20"},{...}]는 jsonData[index].name

으로 데이터를 가져옵니다. 요약하자면: ajax를 사용하여 양식 데이터를 제출하면 데이터 매개변수를 $(form).serialize() 또는 $(form).serializeArray()로 설정할 수 있습니다. 또한, 일부 자세한 내용은 w3c를 참조하는 것이 좋습니다.

마지막으로 완전한 예시를 추가하세요.

html:

<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <form id="demo">
    <input type="text" value="demo1" name="demo1">
    <input type="text" value="demo2" name="demo2">
    <input type="text" value="demo3" name="demo3">
    <input type="submit" value="提交" id="submit">
  </form>
</body>
</html>

JavaScript:

<script>
  // 别忘了引入jquery !!!
  $(function(){
    $("#submit").click(function(){
    // var data = $("form").serializeArray();
      var data = $("form").serialize();
      $.ajax({
        type:"GET",
        url:"1.php",
        data:data,
        dataType:"json",
        success:function(data){
          console.log(data);
        },
        error:function(xhr,error){
          console.log(error);
        }
      })
    })
  })
</script>

php 알림: PHP 환경을 구성하고 서버를 열어야 합니다

<?php 
   echo json_encode($_GET);
 ?>

jQuery 양식 직렬화 예제 코드 예제 공유

관련 기사