我是使用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>
然后页面重新加载,提交表单 - 我在这里遗漏了什么吗?
我确信这是一件简单的事情,我们都必须从某个地方开始!在此先感谢您的帮助。
答案 0 :(得分:1)
您没有随请求传递数据。重新添加您的表单标记并在您的调用中将其序列化,如下所示:
function myCall() {
var request = $.ajax({
url: "processor.php",
type: "GET",
data: $("#contact").serialize(),
dataType: "html"
});