jQuery.post修改了html地址

Question

I have the following excerpt from the log-in form with javascript and jquery used for posting to the server for processing. The code is reduced to the bare minimum for clarity. The file is called 'profile.php' and when run the form data is appended to the address line as follows: 'profile.php?email=test%40gmail.com&pword=test123'. The return from the server is not processed and nothing appears in the console. The script is as follows:

  var type = 1;
  function process() {
    var saveDat = $("#AWForm" + type).serialize();
    saveDat += "&formType=" + type;
    $.post('php/test.php', saveDat, function(result) {
      console.log(result);
    }, "text");
  }

<!--          LOGIN-->
          <form id="AWForm1" class="form" role="form" onsubmit="process()">
            <legend><p id="subHeading">Enter your Login Data</p></legend>
            <div>
              <label for="email">Your Email:</label>
              <input class="form-control input-lg" name="email" placeholder="Enter Email" type="email" autofocus  required autocomplete="email"/>
            </div>
            <label for="pword">Your Password:</label>
            <div>
              <input class="form-control input-lg" name="pword" placeholder="Enter Password" type="password" autofocus  required autocomplete="current-password"/>
            </div>
            <div>
              <p class="msg" id="msg1"></p>
              <button class="btn btn-lg btn-block" type="submit" >log me in</button>
            </div>
          </form>

The php has been reduced to the following simple code for demonstaration purposes:

if (array_key_exists('formType', $_POST)) { exit ("Success"); }

Any help gratefully accepted.

</div>

Answer 1

Hi to solve your problem. Just put return keyword on your form submit.

<form id="AWForm1" class="form" role="form" onsubmit="return process(); ">

Then dont forget to return your javascript function to stop the form from submitting.

function process() {      
    var saveDat = $("#AWForm" + type).serialize();
    saveDat += "&formType=" + type;
    $.post('index2.php?xxx=1', saveDat, function(result) {
      console.log(result);      
    }, "text");
    return false;
  }

You can also event.preventDefault() function to achieve this.