使用 AJAX 调用 PHP 文件

Question

我正在尝试使用 jQuery 中的 $.ajax() 函数调用 php 文件，但它不起作用。单击页面上的按钮时会运行以下代码：

if($error === false) {
        alert($error);
        $.ajax({
            url: '/new-user.php',
            type: 'POST',
            data: {
                name: $('#name').val(),
                email: $('#name').val(),
                password: $('#name').val()
            }
        });

这是我的表格：

<form onClick="return false;" class="reg-form">

    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="name">First Name</label>
                <input type="text" id="name" class="form-control" autofocus="autofocus">
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="email">Email Address</label>
                <input type="text" id="email" class="form-control">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" class="form-control">
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="password-confirm">Confirm Password</label>
                <input type="password" id="password-confirm" class="form-control">
            </div>
        </div>
    </div>

    <button class="btn trans reg-btn">Sign Up</button>

    <div class="reg-msg">
        <span id="password-error-msg">Passwords do not match.</span>
    </div>

</form>

我已将表单的onClick设置为返回false，以便表单在提交时不会重新加载页面，以便jQuery可以运行。

非常感谢任何帮助。

Answer 1

人们使用表单的主要原因是你可以定义一个

action（在你的情况下是一个 php 脚本），

方法（GET或POST）和一个

提交按钮，捕获表单中的所有信息并自动将其发送到服务器。

当您有 20-30 个输入或处理多个文件输入时，这很好。在您的情况下，您正在处理 ajax 函数中的数据检索，您没有定义提交按钮、操作或方法，因此您可以通过完全不使用表单来使事情变得更容易......

    $.ajax({
        url: '/new-user.php',
        type: 'POST',
        dataType: "json",
        data: {
            name: $('#name').val(),
            email: $('#email').val(),
            password: $('#password').val()
        }
    }).done(function(data){
            alert(JSON.stringify(data));
    });

为简单起见，我省略了格式化 div...

<input type="text" id="name" class="form-control" autofocus="autofocus">
<input type="text" id="email" class="form-control">
<input type="password" id="password" class="form-control">

上面的代码会在你的输入中抓取数据，将它发送到 php 脚本，并在警报中输出从你的 php 脚本发回的数据。

最重要的是你的页面不会刷新！

Answer 2

我实际上序列化了我的表单数据，因为它的代码更少。另外，您可以将其与多种形式一起使用。例如，您可以有一个隐藏的输入，其中包含一个任务编号，并有一个 php 脚本来委派任务。或者，您可以为提交函数设置另一个变量来传递脚本的位置。因此，我提交如下表格。

HTML：

<form onsubmit="submitForm('#myForm'); return false;" id='myForm'>
     <input type='text' name='name'/>
     <input type='text' name='email'/>
     <input type='text' name='password'/>
     <input type='submit'/>
</form>

Javascript：

function submitForm(formId){
     var formData = $.(formId).serialize();

     $.ajax({
        url: '/script.php',
        type: 'POST',
        data: formData,
        success:function(response){
           alert(response);
       }
   });

}

Answer 3

请尝试以下代码：

$(".reg-btn").click(function(e)
{
    e.preventDefault();
    $.ajax({
        url: '/new-user.php',
        type: 'POST',
        data: {
            name: $('#name').val(),
            email: $('#name').val(),
            password: $('#name').val()
        },
        success:function(response){
           //Do something here...
        }
   });
});

请注意，您的表单上没有提交按钮。所以 return false 是没有用的..