0

下面是我的代码，我无法将数据处理到后端。

当在注册表单中输入数据并提交其未通过数据时。只需页面重新加载。

谁能告诉我我的代码有什么问题......？

$(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>
4

1 回答 1

0

通过 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>

你可以在这里找到插件

于 2012-11-26T06:01:54.160 回答