jquery form 폼 직렬 화 에 대한 주의사항 상세 설명

본 고 는 주로 jquery form 폼 의 직렬 화 에 관 한 주의사항 을 소개 하고 여러분 이 참고 하여 공부 할 수 있 도록 공유 하 는 것 입 니 다.다음은 더 이상 말 하지 않 고 상세 한 소 개 를 하 겠 습 니 다.
먼저 폼 에 있 는 readonly 와 disabled 의 차 이 를 말씀 드 리 겠 습 니 다.
readonly 는 input 와 textarea 에 만 유효 하지만 disabled 는 이 때문에 폼 요소 에 모두 유효 합 니 다.radio,checkbox 등 을 포함 합 니 다.
폼 에 disabled 를 사용 하면 사용 자 는 선택 할 수 없습니다.즉,이 텍스트 상 자 는 초점 을 얻 을 수 없습니다.readonly 는 초점 을 얻 을 수 있 습 니 다.다만 수정 할 수 없습니다.읽 기 전용 입 니 다.
가장 중요 한 것 은 폼 을 보 낼 때 폼 의 컨트롤 속성 이 name 속성 이 없 으 면 이 필드 는 보 내지 않 고 키 쌍 이 되 지 않 습 니 다.폼 컨트롤 속성 이 disabeld 이면 이 필드 는 보 내지 않 고 키 쌍 이 되 지 않 습 니 다.
테스트 1,name 속성 설정 하지 않 음:

<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,name 속성 설정:

<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)

테스트 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,disabled 속성 설정

<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>
테스트 결 과 는 다음 과 같다.

이 를 통 해 폼 컨트롤 에 name 속성 이 없고 disabled 속성 을 설정 하면 직렬 화 할 수 없습니다.
**disabled 를 직렬 화 하 는 방법 이 필요 하 다 면:
직렬 화 전에 disabled 속성 을 제거 하고 직렬 화 완료 후 추가 하면 됩 니 다.**
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 십시오.저희 에 대한 지지 에 감 사 드 립 니 다.

좋은 웹페이지 즐겨찾기