[英]Get page content from separate page into div on form submit without reloading current page
I'm attempting to fetch data from another page and load its response and content into a div in the page where I have my form - without reloading the form page. 我正在尝试从另一个页面获取数据并将其响应和内容加载到我拥有表单的页面中的div中,而不重新加载表单页面。 When I try this code it refreshes the page and doesn't fetch the results. 当我尝试这段代码时,它将刷新页面,并且不会获取结果。
The current jquery code where I have my form - form.php: 我拥有表单的当前jquery代码-form.php:
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.js'></script>
<script>
$('#skipreload').submit(function() { // catch the form's submit event
$.ajax({ // create an AJAX call...
data: $(this).serialize(), // get the form data
type: $(this).attr('GET'), // GET or POST
url: $(this).attr('dbresults.php'), // the file to call
success: function(response) { // on success..
$('#form_output').html(response); // update the DIV
}
});
return false; // cancel original event to prevent form submitting
});
</script>
</head>
<body>
<form id="skipreload" method="GET" action="form.php">
<input type="text" name="id">
<input type="submit" value="Get results">
</form>
<div id="form_output">
<!--Show the result here from dbresults.php-->
</div>
</body>
</html>
The code in the page I want to fetch results from - dbresults.php: 我要从中获取结果的页面中的代码-dbresults.php:
include("dbsettings.php");
$id = "";
if ($_GET)
{
$id = $_GET['id'];
$sql = "SELECT Results FROM Table WHERE id = '$id';";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
{
echo $row["Results"]";
}
}
When I'm submitting the form in form.php the page reloads without getting the result into the div "#form_output" from getresults.php - why doesn't it work? 当我在form.php中提交表单时,页面重新加载而没有将结果从getresults.php放入div“ #form_output”-为什么它不起作用?
You have some errors in your $.ajax
call. $.ajax
调用中有一些错误。 Only use .attr()
if you want to use the values currently on the form, and even then you need to select by the attribute name instead of the attribute value . 如果要使用表单上当前的值,请仅使用.attr()
,即使这样,也需要按属性名称而不是属性value进行选择 。
Change it to: 更改为:
$.ajax({ // create an AJAX call...
data: $(this).serialize(), // get the form data
type: 'GET', // GET or POST
url: 'dbresults.php', // the file to call
success: function(response) { // on success..
$('#form_output').html(response); // update the DIV
}
});
You can also accomplish the same task by using $.get
您也可以使用$.get
完成相同的任务
$.get('dbresults.php', $(this).serialize(), function(response) {
$('#form_output').html(response);
});
In addition, you need to wrap your code in a .ready()
block: 另外,您需要将代码包装在.ready()
块中:
$(document).ready(function() { // alternatively $(function() {
[...]
});
There is not attribute GET
, that is a value for the method
and there is no attribute 'dbresults.php'
that is a value for the action
attribute. 没有属性GET
,它是method
的值,没有属性'dbresults.php'
是action
属性的值。
In addition your code is being called before form exists 另外,您的代码在表单存在之前被调用
Try: 尝试:
$(function(){ // wait until documented is ready so element exists
$('#skipreload').submit(function() { // catch the form's submit event
$.ajax({ // create an AJAX call...
data: $(this).serialize(), // get the form data
type: $(this).attr('method'), // GET or POST
url: $(this).attr('action'), // the file to call
success: function(response) { // on success..
$('#form_output').html(response); // update the DIV
}
});
return false; // cancel original event to prevent form submitting
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.