使用AJAX将表单参数传递给服务器

在注册表格中输入数据并提交未传递数据时。只需将页面重新加载即可。

任何人都可以告诉我我的代码中有什么问题......？

$(document).ready(function(){ 
$("form#signup").submit(function(e) { 
    e.preventDefault(); 
    dataString = $("#signup").serialize(); 
    if (dataString) { 

$.ajax({ 
    type: "POST", 
    url: "https://IP_addrress/cgi-bin/signup.pl",// URL of the Perl script 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    data: dataString, 
    error: function(XMLHttpRequest, textStatus, errorThrown) { 
      $('div#signupresult').text("responseText: " + XMLHttpRequest.responseText); 
      $('div#signupresult').addClass("error"); 
      }, // error 
    success: function(data){ 
      if (data.error) { // script returned error 
        $('div#signupresult').text("data.error: " + data.error); 
        $('div#signupresult').addClass("error"); 
      } // if 
     else { // Registration successful 
      window.location = "https://IP_addrress/reg_success.html" 
      } //else 
    } // success 
    }); // ajax 
} // if 
else { 
    $('div#signupresult').text("check the error") 
    $('div#signupresult').addClass("error"); 
    } // else 
    $('div#loginResult').fadeIn(); 
    return false; 
    }); 
}); 


    <div id="signupresult" style="display:none; margin:15px;"></div> 
    <div id="center" style="width: 28%; margin:0 auto;padding: 0 auto; "> 
    <div id="the_div"> 
    <header id="the_header"><img src="static/images/logo.jpeg" style="margin-left:55px;" align="left" width="240px" height="70px" /></header> 
     <section id="the_section"> 
     <title>Signup</title> 
      <style type='text/css'> 
      </style> 
      </br><h1 style="text-align: center;font-size: 15px;color:black;">Signup</h1> 
      <form name="signup_form"style="align:center" id="signup" action="https://IP/cgi-bin/signup.pl/" method="POST"> 

      <fieldset> 
      <legend>Account Information</legend> 
      <ol> 
        <li><input id=name type=text pattern="[a-zA-Z ]{5,}" maxlength="20" name=username placeholder="User Name" required autofocus></li> 
        <li><input id="pass" type="password" name="password" placeholder="Password" required></li>      
        <li><input id="vpass" type="password" onkeyup="checkPass(); return false;" placeholder="Verify Password" required></li> 
      </ol> 
      </fieldset> 

    <fieldset> 
      <legend>User Details</legend> 
      <ol> 
        <li><input id=name type=text pattern="[a-zA-Z ]{5,}" maxlength="20" name="firstname" placeholder="First Name" required autofocus></li> 
        <li><input id=name type=text pattern="[a-zA-Z ]{5,}" maxlength="20" name="lastname" placeholder="Last Name" required autofocus></li> 
        <li><input id="email" onkeyup="validateEmail(); return false;" type="email" name="email_id" placeholder="Email ID" required autofocus></li> 

        <li><input id=phone type="tel" name="telephone_no" placeholder="Telephone No" required></li> 
        <li> 
          <div class='selectBox'> 
          <label for=cardnumber>Select Country</label> 
          <select name="country"> 
           <option value="000" selected="selected">[Select Country]</option> 
           <option value="1">India</option> 
           <option value="2">Singapore</option> 
           <option value="3">US</option> 
          </select> 
          </div> 
        </li> 
      </ol> 
      </fieldset> 

    </fieldset> 
        <fieldset> 
          <button vaule=register id="submit_btn" type=submit>Register</button> 
        </fieldset> 
      </form>

来源

2012-11-26 Shoaib

你能展现形式以及？ JsFiddle可能会更好。 – BuddhiP

你正在设置内容类型为'application/json; charset = utf-8“，但发送”application/x-www-form-urlencoded“数据。 – Musa

– Shoaib

一个非常合适的方式来提交您的形式通过AJAX是.ajaxform（）

试试这个

<script> 
    // wait for the DOM to be loaded 
    $(document).ready(function() 
    { 
     // bind 'myForm' and provide a simple callback function 
     $("#tempForm").ajaxForm({ 
     url:'../calling action or servlet', 
     type:'post', 
     beforeSend:function() 
     { 
     alert("perform action before making the ajax call like showing soinner image"); 
     }, 
     success:function(e){ 
     alert("data is"+e); 
      alert("now do whatever you want with the data"); 
     } 
     }); 
    }); 
</script>

，你可以找到插件here

来源

2012-11-26 06:01:54

使用AJAX将表单参数传递给服务器

回答

相关问题