php - 如何在表单提交中使用 jquery ajax

Question

现在将代码更改为此。表单位于包含在索引页面中的 subscribe.php 中。

<form class="subscribe" id="email" method="get">
    <input class="email" id="emailaddress" name="email" type="text" placeholder="EXAMPLE@EMAIL.COM" required>
    <input class="button" type="submit" id="emailSub" value="Subscribe">
</form>
<div id="subResult"></div>

Jquery 在索引页的底部

$(document).ready(function() {
    $('#emailSub').click(function() {
        var email = $('#emailaddress').val();
        alert(email);
        $.ajax({
            type: "GET",
            dataType: 'script', //<-Data Type for AJAX Requests(xml | html | script | json)
            url: 'checksub.php',
            data: {
                'e': email
            },
            success: function(result) {
                $("#subResult").html(result);
            }
        });
    })
});

Checksub 页面现在用于测试。

<?php include 'admin/includes/db_connection.php'; ?>
<?php 
$email = mysqli_real_escape_string($db, $_GET['e']);
echo "test string:";
echo $email;
?>

Answer 1

您是否阻止默认点击事件触发提交？

$('#emailSub').click(function(e){
    e.preventDefault();
    var email = $('#emailaddress').val();
    $.ajax({url:"checkemail.php?e="+email,success:function(result){
        $("#subResult").html(result);
    }});
})

Answer 2

也许你应该改变数据类型？尝试一下：

$.ajax({
    type: "GET",
    dataType: 'html', //<-Data Type for AJAX Requests(xml | html | script | json)
    url: 'checkemail.php',
    data: {
        'e': email
    },
    success: function(data) {
        $("#subResult").html(result);
    }
});

和

<input class="button" type="submit" id="emailSub" value="Subscribe">
                              ^ HERE

应该 ：

<input class="button" type="button" id="emailSub" value="Subscribe">

因为submit正在提交表单并刷新页面..所以jquery不起作用..

指定 AJAX 请求的数据类型