我开发了一个 php 表单，它根据下拉选项发起数据库请求以获取数据。
PHP 表单:
<form method="get" action="<?php echo $url = basename($_SERVER['PHP_SELF']); ?>">
<select name="town" onchange='this.form.submit()'>
<?php $result= mysql_query('Query'); ?>
<option value="x" selected>Select Choice</option>
<?php while($row= mysql_fetch_assoc($result)) { ?>
<option value="<?php echo htmlspecialchars($row['town']);?>" >
<?php echo htmlspecialchars($row['town']); ?>
</option>
<?php } ?>
<input type="hidden" name="action" value="submit" /><br>
</select>
</form>
表单操作:
<?php
if(isset($_GET["action"])) {
$var1= $wpdb->get_results("Query");
$var2= $wpdb->get_results("Query");
Content to show once executed }
?>
我怎样才能使表单使用 AJAX 获取数据而不是持续刷新整个页面而只刷新表单部分？
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<form id="form_id" action="<?php echo $url = basename($_SERVER['PHP_SELF']); ?>" method="post">
<select id="town" name="town" onchange="send_to_server()">
<?php $result= mysql_query("Query"); ?>
<option value="x" selected>Select Choice</option>
<?php while($row= mysql_fetch_assoc($result)){ ?>
<option value="<?php echo htmlspecialchars($row['town']); ?>">
<?php echo htmlspecialchars($row['town']); ?>
</option>
<?php } ?>
<input type="hidden" name="action" value="submit" /><br>
</select>
</form>
<script type='text/javascript'>
/* attach a submit handler to the form */
function send_to_server(){
var value = $("#town").val();
/* get some values from elements on the page: */
var $form = $("#form_id"); var url = $form.attr('action');
/* Send the data using post */
var posting = $.post( url, { option_value: $("#town").val() } );
posting.done(function( data ) {
alert('success');
});
}
</script>
</body>
</html>
以上内容正是您想要的。在本地主机中查看