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”，然后检查控制台和网络以获取服务器请求和标头，请确保所有参数都在那里。

希望能有所帮助