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

Question

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

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

到

localhost.documents/projects/test/?form_type=register&Username=&first_name=&surname_prefix=&surname=&surname=&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>  

pageHandler.js

$(document).ready(function() {
var request;

    //page handler
    //pageRequest('home');
$('.click').click(function(event) {
    var temp = $(this).attr('id');
    var pages = ['home','register'];
    if($.inArray(temp, pages) !== -1) {
        pageRequest(temp);
        //$('.message').html(temp);
    }   
    event.preventDefault();
}); 

function pageRequest(temp) {
    var page = $('#page');
    if(typeof ajax_request !== 'undefined') {
        request.abort();
    }       
    request = $.ajax({
        type: "POST",       
        url: "core/posts.php",
        data: 'temp=' + temp
    });
    request.done(function(data) {
        page.fadeOut(function() {
            page.html('');
            page.html(data).fadeIn();
        }); 
    });
    request.fail(function(jqXHR, textStatus) {
        page.fadeOut(function() {
            page.html('');
            page.html(textStatus).fadeIn();
        });
    }); 
}

//form handler
$('#page').delegate( "#form", "submit", function(event) {
    var $form = $(this);
    var $inputs = $form.find("input, select, button, textarea");
    var serializedData = $form.serialize();
    $inputs.prop("disabled", true);
    formRequest(serializedData);
    event.preventDefault();     
});     

function formRequest(values) {
    var message = $('.message');
    if(typeof ajax_request !== 'undefined') {
        request.abort();
    }       
    request = $.ajax({
        url: "core/posts.php",
        type: "POST",
        data: values
    }); 
    request.done(function(data) {
        message.fadeOut(function() {
            message.html('');
            message.html(data).fadeIn();
        });
    });
    request.fail(function(jqXHR, textStatus) {
        message.fadeOut(function() {
            message.html('');
            message.html(textStatus).fadeIn();
        });
    }); 
}   
});

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 输入字段的名称是用户名。我已经改变了这个，现在浏览器中的 url 不再改变了。我很高兴我找到了问题，但我仍然不明白为什么 ajax 发送的数据会出现在 url 中。

Answer 1

“我想提交表单而不刷新页面”

有几种方法可以做到这一点，我认为最简单的方法是拦截并阻止表单像常规 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>