jquery의 양식 직렬화에 대한 몇 가지 지침-JS 튜토리얼-php.cn

jquery의 양식 직렬화에 대한 몇 가지 지침

巴扎黑

풀어 주다： 2017-08-07 16:36:28

원래의

1213명이 탐색했습니다.

이 글에서는 주로 jquery 양식 직렬화에 대한 주의 사항을 소개합니다. 이 글에서는 누구나 참고할 수 있는 학습 가치가 있는 샘플 코드를 통해 자세히 소개합니다.

이 기사에서는 주로 jquery 양식 직렬화에 대한 몇 가지 주의 사항을 소개합니다. 참고 및 학습을 위해 공유합니다. 아래에서는 자세한 소개를 살펴보겠습니다.

먼저 이야기해 보겠습니다. 양식에서 읽기 전용과 비활성화의 차이점:

readonly는 입력 및 텍스트 영역에만 유효하지만 비활성화는 라디오, 확인란 등을 포함한 모든 양식 요소에 유효합니다.
양식에서 비활성화를 사용하는 경우 사용자는 선택할 수 없습니다. 즉, 이 텍스트 상자는 포커스를 얻을 수 없지만 읽기 전용은 포커스를 얻을 수 있지만 수정할 수는 없습니다.

가장 중요한 점은 양식을 보낼 때 컨트롤이 양식의 속성에 이름 속성이 없습니다. 이 필드는 전송되지 않으며 키-값 쌍을 형성하지 않습니다. 양식 제어 속성이 비활성화된 경우 이 필드는 전송되지 않으며 키도 형성되지 않습니다. -값 쌍

테스트 1, 이름 속성이 설정되지 않음:

<body>
 <form id="form1">
   <select>
    <option value="0">葫芦娃测试0</option>
    <option value="1">葫芦娃测试1</option>
    <option value="2">葫芦娃测试2</option>
   </select>
   <input type="button" id="btnSubmit" value="提交" name="btnSubmit" />
 </form>
 <script type="text/javascript">
  $(document).ready(function () {
   $("#btnSubmit").click(function () {
    console.log("serialize:");
    console.log($("#form1").serialize());
    console.log("serializeArray:");
    console.log($("#form1").serializeArray());
   });
  });
 </script>
</body>

로그인 후 복사

출력 결과는 다음과 같습니다.

serialize:

 serializeArray:
[]length: 
__proto__: Array(0)

로그인 후 복사

테스트 2, 이름 속성 설정 :

<body>
 <form id="form1">
   <select name="selectHuLuWa">
    <option value="0">葫芦娃测试0</option>
    <option value="1">葫芦娃测试1</option>
    <option value="2">葫芦娃测试2</option>
   </select>
   <input type="button" id="btnSubmit" value="提交" name="btnSubmit" />
 </form>
 <script type="text/javascript">
  $(document).ready(function () {
   $("#btnSubmit").click(function () {
    console.log("serialize:");
    console.log($("#form1").serialize());
    console.log("serializeArray:");
    console.log($("#form1").serializeArray());
   });
  });
 </script>
</body>

로그인 후 복사

출력 결과는 다음과 같습니다.

serialize:
 selectHuLuWa=0
 serializeArray:
 [{…}]
{name: "selectHuLuWa", value: "0"}
length:1
__proto__:Array(0)

로그인 후 복사

test 3. readoly 속성을 설정합니다.

<body>
 <form id="form1">
   <select name="selectHuLuWa" readonly="readonly">
    <option value="0">葫芦娃测试0</option>
    <option value="1">葫芦娃测试1</option>
    <option value="2">葫芦娃测试2</option>
   </select>
   <input type="button" id="btnSubmit" value="提交" name="btnSubmit" />
 </form>
 <script type="text/javascript">
  $(document).ready(function () {
   $("#btnSubmit").click(function () {
    console.log("serialize:");
    console.log($("#form1").serialize());
    console.log("serializeArray:");
    console.log($("#form1").serializeArray());
   });
  });
 </script>
</body>

로그인 후 복사

테스트 결과는 다음과 같습니다 :

테스트 4. 비활성화 속성 설정

<body>
 <form id="form1">
   <select name="selectHuLuWa" disabled="disabled">
    <option value="0">葫芦娃测试0</option>
    <option value="1">葫芦娃测试1</option>
    <option value="2">葫芦娃测试2</option>
   </select>
   <input type="button" id="btnSubmit" value="提交" name="btnSubmit" />
 </form>
 <script type="text/javascript">
  $(document).ready(function () {
   $("#btnSubmit").click(function () {
    console.log("serialize:");
    console.log($("#form1").serialize());
    console.log("serializeArray:");
    console.log($("#form1").serializeArray());
   });
  });
 </script>
</body>

로그인 후 복사

테스트 결과는 다음과 같습니다.