Question

更新：这是错误：

412 (Precondition Failed)

我试图从ajax调用一个php脚本，我目前有下面的ajax，当单击表单中的按钮（也在下面）时会调用一个php脚本传递它的表单数据，然后将提交到数据库。

然而，它不起作用;还有什么我只是得到一个空白的错误，所以我甚至不知道出了什么问题。

请问我能指出正确的方向吗？

感谢。

HTML表单：

<form name="report-form" id="report-form" action="" method="POST">              
                <textarea id="reason-box" type="text" name="reason-box" cols="40" rows="5" maxlength="160" onkeypress=""></textarea>    
                <input id="reportedID" name="reportedID" type="text" />
                <!--<input id="report-submit" value="" name="submit" type="submit" onclick="submitReport()"/>   -->
                <button id="report-submit" name="submit" onclick="submitReport()"></button>

            </form>

AJax电话：

function submitReport()
        {           

            var ID=$('#reportedID').val();
            var reason=$('#reason-box').val();

            var  formData = "ID="+ID+"&reason="+reason;
            alert(formData);

         //This code will run when the user submits a report.
           $.ajax(
            {           
               url: 'submit_report.php',
               type: "POST",
               data: formData,
               success: function(data)
               {                     
                 alert("Report Submitted!");
               },           
               error: function(xhr,err)
               {                     
                  alert(err.message);
                    alert("responseText: "+ xhr.responseText);
               }
           });

        }

现在我已经测试了php脚本，并且运行正常，当我添加ajax调用时问题就开始了，所以我知道它与ajax而不是php有关。

Answer 1

这应该可以解决提交问题：

您的jQuery Ajax调用未能成功，因为POST数据未以正确的格式提供。
如果ajax成功，则表单也会发布，导致405错误。

 <button id="report-submit" name="submit" onclick="submitReport(event)"></button>

function submitReport(event)
{           
    event.preventDefault();
    ....... // your code

}

现在将阻止表单的默认操作（导致405错误）。并且只提交了ajax请求。

在button元素中，我们将event对象传递给函数。我们使用event.preventDefault()来确保按钮没有运行默认操作，即提交表单。

你也可以通过将表单元素作为包装器来删除，但也许你想在表单上使用其他功能（如验证）。

jQuery中的表单数据ajax请求需要是一个名为data的对象：

var formData = {"ID" : ID, "reason" : reason};

jQuery会将此改为正确的提交查询字符串。

Answer 2

我会这样做：

<form name="report-form" id="report-form" action="" method="POST">              
      <textarea id="reason-box" type="text" name="reason-box" cols="40" rows="5" maxlength="160"></textarea>    
      <input id="reportedID" name="reportedID" type="text" />
      <button id="report-submit" type="submit" name="submit" value="submit"></button>
</form>

<script type="text/javascript">
jQuery("document").ready(function(){
    var $ = jQuery
    $("form").submit(function(){
        var data = "";
        data = $(this).serialize() + "&" + $.param(data);

        $.ajax({
            type: "POST",
            url: "submit_report.php", 
            data: data,
             success: function(data)
               {                     
                 alert("Report Submitted!");
               },           
               error: function(xhr,err)
               {                     
                  alert(err.message);
                    alert("responseText: "+ xhr.responseText);
               }
        });
        return false;
    });
});
</script>

然后在PHP脚本中使用$reason=$_POST['reason-box'];和$ID=$_POST['reportedID'];

Answer 3

选择提交数据的表单是可选的，或者您可以在没有HTML表单的情况下执行此操作这就是我的工作

 <textarea id="reasonbox" type="text" name="reason-box" cols="40" rows="5" maxlength="160" onkeypress=""></textarea>    
<input id="reportedID" name="reportedID" type="text" />
 <button id="report-submit"  ></button>

和使用下面的javascript和jquery样式

<script type="text/javascript">
$(function() {

 $("#report-submit").click(function(){
            try
            {
                $.post("your php page address goes here like /mypage.php",
                    {
//in this area you put the data that is going to server like line below
                        'reasonbox':$("#reason-box").val().trim(),
                        'reportedID':$("#reportedID").val().trim()

                    }, function(data){
                        data=data.trim();
//this is data is sent back from server you can send back data that you want
//like message or json array
                    });
            }
            catch(ex)
            {
                alert(ex);
            }
        });

});
</script>

我希望它有所帮助

AJax没有正确调用php文件，html表单

3 个答案: