Php jquery ajax加载的表单提交将序列化数据设置为url

我正在制作一些网页应用程序，它可以加载网页而不重新格式化网页。这一切都很好，但现在我在其中一页上有一个表格。我想提交没有页面刷新的表单。但是当我在用ajax加载表单后提交表单时，浏览器中的url将从

本地主机/文档/项目/测试/

到

localhost.documents/projects/test/？form_type=register&Username=&first_name=&nam姓氏_prefix=&nam姓氏=&nam姓氏=&email=

当我将表单html放入index.php并提交到那里时，它就可以正常工作了。 我希望有人能告诉我我做错了什么，以及如何修复它

index.php的一部分

<div class="message"></div>
<div id="content">
    <div id="page">
<div class="form_container">
<form id="form">
    <input type="hidden" name="form_type" value="register" />
    <input class="type_text" type="text" name="username"  maxlength="20" placeholder="username" />
    <input class="type_text" type="text" name="first_name" maxlength="50" placeholder="First Name" />
    <input class="type_text" type="text" name="surname_prefix" maxlength="20" placeholder="Surname Prefix" />
    <input class="type_text" type="text" name="surname" maxlength="50" placeholder="Surname" />
    <label class="label" for="birth_date">dd-mm-jjjj</label>
    <input id="birth_date" class="type_text" type="text" name="birth_date" maxlength="10" placeholder="Birth Date" />       
    <input class="type_text" type="text" name="email" placeholder="Email Address" />
    <input class="type_submit" type="submit" value="Register" />
</form>
</div>
</div>  

posts.php

If(isset($_POST['temp'])) {
    $temp = $_POST['temp'];
    $url = '../content/templates/'.$temp.'.html';
    if(file_exists($url)) {
        $html = file_get_contents($url);
        echo $html;
    }
    else {
        echo 'Sorry, couldn\'t find the page.';
    }       
}
//form handler
if(isset($_POST['form_type'])) {
    require_once('../admin/config/database.functions.php');
    $function = new myDBFunctions();
    switch($_POST['form_type']) {
        case 'register' :
            $username = $_POST['username'];
            $firstname = $_POST['first_name'];
            $surnamep = $_POST['surname_prefix'];
            $surname = $_POST['surname'];
            $birthdate = $_POST['birth_date'];              
            $email = $_POST['email'];
            echo 'Thanks for your registration';                    
            break;
        case 'login' :
            echo 'login';
            break;
        case 'password_recovery' :
            echo 'password recovery';
            break;  
    }
}

---

我发现了问题，但没有找到它发生的原因。我在posts.php文件中有一个$_POST['username']，而html输入字段的名称是username。我已经改变了这个，现在浏览器中的url不再改变了。我很高兴我发现了这个问题，但我仍然不明白为什么ajax发送的数据会在url中出现问题。

我想提交表单，但不刷新页面

有几种方法可以做到这一点，我认为最简单的方法是拦截并阻止表单像常规HTML表单一样实际提交，而是使用表单字段中的数据进行ajax调用

为此，您需要截获表单的提交事件，获取表单中所有输入的值，并使用数据向服务器进行ajax调用：

<form id="myForm">
  ....
</form>
<script>
$('#form').on("submit", function(event) {
  // stop the form from submitting
  event.preventDefault();

  // get data in the inputs of the form
  var data = {};
  var $inputs = $('#form').children("input, select, textarea");
  inputs.each(function($element){
    data[$element.attr('name')] = $element.val();
  });

  // submit data to the backend
  request = $.ajax({
    type: "POST",       
    url: "",
    data: data
  });
});
</scipt>

---

嗯，我已经有这个了。使用on而不是deligate没有什么区别，同样，像这样获取输入值而不是使用serialize也没有什么区别。

<form id="myForm">
  ....
</form>
<script>
$('#form').on("submit", function(event) {
  // stop the form from submitting
  event.preventDefault();

  // get data in the inputs of the form
  var data = {};
  var $inputs = $('#form').children("input, select, textarea");
  inputs.each(function($element){
    data[$element.attr('name')] = $element.val();
  });

  // submit data to the backend
  request = $.ajax({
    type: "POST",       
    url: "",
    data: data
  });
});
</scipt>