php - 防止表单刷新页面Javascript

Question

我很不擅长 javascript，我正在尝试进行 AJAX 调用，但我从表单字段中获取值，它只是刷新页面，甚至无法观察 AJAX 调用是否成功。

这是我的 HTML:

<form class="form-horizontal" id="subscribe-form" name="subscribe-form" onSubmit="return subscribe();">
    <fieldset>
        <p>
                         Subscribe
        </p>
        <div class="input-prepend input-append">
           <input name="subscribwEmail" class="span2" id="InputEmail" type="email" placeholder="Email">
           <input type="submit" class="btn btn-inverse" />
        </div>
    </fieldset>
</form>

JS:

function subscribe() {
    var emailForm = $('#subscribwEmail').val();
    $('#subscribe-form').hide(); // hide email form
$('#subscribeDiv').prepend('<img id="process" src="http://www.mydomain.com/assets/img/process.gif" />')

$.ajax({
    type: "POST", 
    url: "../../actions/ajax-subscribe.php",
    data: {
        email: emailForm
    },
    dataType: "json",
    success: function (data) {
        if (data[0] == 1) { // test if response was 1 or 2

            $('#process').hide(); // hide img

            $('#subscribeDiv').append('<p>Thank you for subscribing!</p>');
        } else {

            $('#process').hide(); // hide img

            $('#subscribeDiv').append('<p>There was an error subscribing the email.</p>');
        }
    }
})

};

ajax-subscribe.php

<?php
include ('phpfunctions.php');

$email = $_POST['email'];
$ip = $_SERVER['REMOTE_ADDR'];
$con = mysqli_connect(DB_HOST,DB_USER,DB_PASS,DB_NAME) or die('ERROR WITH SQL CONNECTION CONTACT ADMIN');

$email = cleanString($con, $email);

$query = "INSERT INTO `subscribers` (`email`, `ip`) VALUES ('$email', '$ip');";

if ($result = mysqli_query($con, $query)) {

echo json_encode(1); // all ok inserted
} else {

echo json_encode(0); // failed
}

?>

Answer 1

您没有取消点击事件，所以表单提交。

将 return false; 添加到您的 subscribe 方法的末尾。