1. ホーム
  2. Web プログラミング
  3. AJAX関連

ajaxによるチェックフォーム方式での投稿

2022-01-18 05:18:27

この例では、参考までに投稿時にフォームをチェックするためのajaxメソッドを以下のように共有しています。

方法1.

コード例です。 

巧妙なデザイン:ajaxが送信された場合、インターセプトを確認することはできませんが、決定するためにフラグを設定し、非常に巧妙なデザインなので、収集する!(1)

function inserts(){
 var flag = checkForm();
 if (flag == false) {
  return;
 }
 $.ajax({
     // A few parameters to note
       type: "POST",// method type
       dataType: "json",//the type of data expected to be returned by the server
       url: "<%=path %>/soldier/inserts",//url
       data: $('#form1').serialize(),
       success: function (data) {
        alert(data.msg);
        window.location.reload(true);
       },
       error : function() {
         alert(data.msg);
       }
     });
 }
 function checkForm(){
 var name = $("#name").val();
 if (name.trim() == '') {
  alert("Please enter a name! ");
  $("#name").focus();
  return false;
 }
 var sex = $("#sex").val();
 if (sex.trim() == '') {
  alert("Please enter gender! ");
  $("#sex").focus();
  return false;
 } else if (sex.trim() ! = 'male' && sex.trim() ! = 'female') {
  alert("Please enter a legal gender! ");
  $("#sex").val('');
  $("#sex").focus();
  return false;
 }
 var age = $("#age").val();
 if (age.trim() == '') {
  alert("Please enter age! ");
  $("#age").focus();
  return false;
 }else if(age.trim()==0 || age.trim()<=0 || age.trim()>150){
  alert("Please enter a legal age! ");
  $("#age").focus();
  return false;
 }
 var politics_sstatus = $("#politics_sstatus").val();
 if (politics_sstatus.trim() == '') {
  alert("Please enter political status! ");
  $("#politics_sstatus").focus();
  return false;
 }
 var tel = $("#tel").val();
 if (tel.trim() == '') {
  alert("Please enter a contact number! ");
  $("#tel").focus();
  return false;
 }else if(tel.length<11 || tel.length>11){
  alert("Please enter a legitimate contact number! ");
  $("#tel").focus();
  return false;
 }
 var id_card = $("#id_card").val();
 if (id_card.trim() == '') {
  alert("Please enter ID number! ");
  $("#id_card").focus();
  return false;
 }else if(id_card.length<18 ||id_card.length>18){
  alert("Please enter a legal ID number! ");
  $("#id_card").focus();
  return false;
 }
 var appeal = $("#appeal").val();
 if (appeal.trim() == '') {
  alert("Please enter the main claim! ");
  $("#appeal").focus();
  return false;
 }
 return true;
 }

ページの効果です。

 方法2

これは、ログインのためのajaxチェックサムです

コード例です。

ページの送信ボタンです。

<input type="button" id="loginsubmit" value="login" />

 jsのロジックです。

解析する。ユーザーがボタンをクリックすると

<script type="text/javascript">
 var redirectUrl = "${redirect}";
 var LOGIN = {
  /*
  3. Perform account password verification
  */
  checkInput:function() {
  if ($("#loginname").val() == "") {
   alert("Username cannot be empty");
   $("#loginname").focus();
   return false;
  }
  if ($("#nloginpwd").val() == "") {
   alert("Password cannot be empty");
   $("#nloginpwd").focus();
   return false;
  }
  return true;
  },
  /*
  4. Login
  1. Background check when the account password check is not empty
  */
  doLogin:function() {
  $.post("/user/login", $("#formlogin").serialize(),function(data){
   if (data.status == 200) {
   alert("Logged in successfully! ");
   if (redirectUrl == "") {
    location.href = "http://localhost:8082";
   } else {
    location.href = redirectUrl;
   }
   } else {
   alert("Login failed due to:" + data.msg);
   $("#loginname").select();
   }
  });
  },
  /*
  2. Perform login verification
  */
  login:function() {
  if (this.checkInput()) {
   this.doLogin();
  }
  }
 
 };
 /* 
 1. Check the data of the form when the page is initialized
  1. When the user clicks on the login, bind a click event
  2. Call the LOGIN object's login method to verify the account password
 */ 
 $(function(){
 $("#loginsubmit").click(function(){
  LOGIN.login();
 });
 });
</script>

レンダリング

以上が今回の記事の内容ですが、皆様の学習の一助となり、スクリプトハウスをより一層応援していただければ幸いです。