在表单中包装数据时出现Ajax错误

时间:2013-09-16 13:16:27

标签: jquery html ajax

我是使用Ajax的新手,我正在尝试使用以下代码接收表单中提交的数据。

<div>

    <p> <label for="name">Full Name:</label>    
    <input type="text" name="name" required/></p>
    <br />

    <p><label for="email">Email:</label>    
    <input type="text" name="email" required/></p>
    <br />

    <p><label for="id">id:</label>  
    <input type="text" name="id" value="<?php echo($id); ?>" required/></p>
    <br />

    <p><label for="phone">Phone:</label>    
    <input type="text" name="phone" /></p>
    <br />

    <p><label for="phone">Message:</label>  
    <textarea required></textarea></p>

    <button onclick="myCall()" type="submit">Submit</button>
    <div id="mybox">
        Answer: 
    </div>

</div>

jQuery

<script>

    function myCall() {
        var request = $.ajax({
            url: "processor.php",
            type: "GET",            
            dataType: "html"
        });

        request.done(function(msg) {
            $("#mybox").html(msg);          
        });

        request.fail(function(jqXHR, textStatus) {
            alert( "Request failed: " + textStatus );
        });
    }
</script>

这只是在回显测试消息时工作正常,但表单数据不会发送,因为它显然需要包装在表单标签中,当我这样做时,我会收到以下错误。

Request failed: error

带有表单标记的HTML:

<form class="claim" method="get" id="contact">
          <div>

         <p> <label for="name">Full Name:</label>   
            <input type="text" name="name" required/></p>
            <br />

          <p><label for="email">Email:</label>  
            <input type="text" name="email" required/></p>
            <br />

            <p><label for="id">id:</label>  
            <input type="text" name="id" value="<?php echo($id); ?>" required/></p>
            <br />

            <p><label for="phone">Phone:</label>    
            <input type="text" name="phone" /></p>
            <br />

            <p><label for="phone">Message:</label>  
            <textarea required></textarea></p>

            <button onclick="myCall()" type="submit">Submit</button>
            <div id="mybox">
             Answer: 
        </div>
          </div>
        </form>

然后页面重新加载,提交表单 - 我在这里遗漏了什么吗?

我确信这是一件简单的事情,我们都必须从某个地方开始!在此先感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

您没有随请求传递数据。重新添加您的表单标记并在您的调用中将其序列化,如下所示:

function myCall() {
    var request = $.ajax({
        url: "processor.php",
        type: "GET",      
        data: $("#contact").serialize(),      
        dataType: "html"
    });