jQuery ajax形式不起作用

Question

我嘗試了多種方法來創建簡單的jquery ajax表單，但是不知道為什么它不提交和/或返回通知。

這是我的代碼：

Java腳本

...
<script type="text/javascript" src="assets/js/jquery1.11/jquery-1.11.0.min.js"></script>
...

$('#form_signup').submit(function(event) {
    event.preventDefault();
    $.ajax({
        type: 'POST',
        url: 'signup.php',
        data: $(this).serialize(),
        dataType: 'json',
        success: function (data) {
            console.log(data);
            $('#form_signup_text').html(data.msg);
        },
        error: function (data) {
            console.log(data);
            $('#form_signup_text').html(data.msg);
        }
    });
});

的HTML

<form id="form_signup" name="form_signup" method="POST">
    <div>
        <input type="email" id="inputEmail1" name="inputEmail1" placeholder="your@email.com">
    </div>
    <div>
        <a type="submit">Sign up!</a>
    </div>
    <div id="form_signup_text">
        <!-- A fantastic notice will be placed here =D -->
    </div>
</form>

的PHP

<?php

$our_mail =    "our@email.com";
$subject  =    "Wohoo! A new signup!";
$email    =    $_POST['inputEmail1'];

$return = array();
$return['msg'] = 'Thank you!';
$return['error'] = false;

if(preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/", $email)){

    $message = "Yesss!! We receive a new signup!
    E-mail: $email
    ";
    mail($our_mail, $subject, $message);

}
else {
    $return['error'] = true;
    $return['msg'] .= 'Something is wrong... snifff...';
}

return json_encode($return);

---

解決了：

有三個問題。 並且，不同的用戶可以解決這些問題。

1. 在PHP中，您必須“回顯”返回數組，而不是“返回”
2. 首先，您應該使用提交按鈕代替表單中的錨點
3. 在輸入中，必須同時設置“ id”和“ name”

如果這些用戶中有任何一個，您可以編輯或添加包含這些詳細信息的新答案，這些要點就是您的了。

Answer 1

問題出在您的表格上。

<form id="form_signup" name="form_signup" method="POST">
    <div>
        <input type="email" id="inputEmail1" name="inputEmail1" placeholder="your@email.com">
    </div>
    <div>
        <input type="submit" name="submit" value="Submit">
    </div>
    <div id="form_signup_text">
        <!-- A fantastic notice will be placed here =D -->
    </div>
</form>

Answer 2

您需要做3件事。

首先 ，將您的jQuery代碼包裝在$(document).ready()函數中，

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#form_signup').submit(function(event) {
            event.preventDefault();
            $.ajax({
                type: 'POST',
                url: 'signup.php',
                data: $(this).serialize(),
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                    $('#form_signup_text').html(data.msg);
                },
                error: function (data) {
                    console.log(data);
                    $('#form_signup_text').html(data.msg);
                }
            });
        });
    });
</script>

其次 ，在表單中添加一個提交按鈕。 另外，您也缺少電子郵件輸入字段的name屬性。 這會導致php文件中的錯誤。

<form id="form_signup" name="form_signup" method="POST">
    <div>
        <input type="email" id="inputEmail1" name="inputEmail1" placeholder="your@email.com">
    </div>
    <div>
        <input type="submit" name="signup" value="Sign Up!"/>
    </div>
    <div id="form_signup_text">
        <!-- A fantastic notice will be placed here =D -->
    </div>
</form>

第三 ， echo顯結果，因為您正在使用AJAX提交表單。 return將不會有任何影響。

<?php

$our_mail =    "our@email.com";
$subject  =    "Wohoo! A new signup!";
$email    =    $_POST['inputEmail1'];

$return = array();
$return['msg'] = 'Thank you!';
$return['error'] = false;

if(preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/", $email)){

    $message = "Yesss!! We receive a new signup!
    E-mail: $email
    ";
    mail($our_mail, $subject, $message);
}
else {
    $return['error'] = true;
    $return['msg'] .= 'Something is wrong... snifff...';
}

echo json_encode($return);exit;

我檢查了，一切正常。

希望這可以幫助 ：）

Answer 3

php代碼需要回顯而不是返回。

像這樣：

echo json_encode($return);

另外，您的表單需要一個提交按鈕- <a>標記上的type="submit"不會觸發瀏覽器處理<form>的功能

最后，您需要確保在正確的時間加載了特殊的提交處理程序-如果將其包含在頁面底部的頁腳之前，則應該很好。 但是，您可以通過將其包裝在

$(document).ready(function(){
     //[...]
 }); 

Answer 4

您的type="submit"不是需要輸入嗎？ 或一個按鈕

Answer 5

我試圖在asp.net中使用jquery在ajax中調用webmethod，但有時效果很好，有時卻不行。

這是我的ajax代碼：

$.ajax({
    type: "POST", 
    url: "frmTest.aspx/fncSave", 
    data: "{}"
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    async: "false",
    cache: "false", //True or False
    success: function (response) 
    result = response.d;
    if (result != "") {
        alert(response);
    }
},
Error: function (x, e) {
    alert("err");
    return false;
}
});

這是我的服務器端代碼：

<WebMethod()>
    Public Shared Function fncSave() As String
    Dim sResult As Int16
    Try
        Dim obj As New ClsCommon()
        sResult = obj.Save()
    Catch ex As Exception
                ex.Message.ToString()
    End Try
    Return sResult
End Function

Answer 6

“ ajax”函數中的$（this）不是表格。 因此，只需嘗試：

$('#form_signup').submit(function(event) {
    event.preventDefault();
    var $this = $(this);
    $.ajax({
        type: 'POST',
        url: 'signup.php',
        data: $this.serialize(),
        dataType: 'json',
        success: function (data) {
            console.log(data);
            $('#form_signup_text').html(data.msg);
        },
        error: function (data) {
            console.log(data);
            $('#form_signup_text').html(data.msg);
        }
    });
});

我承認我沒有檢查其余的代碼，我很確定這就是問題所在。

當然，如果問題仍然存在，只需單擊“ f12”，然后檢查控制台和網絡以獲取服務器請求和標頭，請確保所有參數都在那里。

希望能有所幫助