如何使用ajax或任何其他方法将result.php的结果导入welcome div以防止加载新页面？
<div id="welcome">
<form action="result.php" method="post">
<input type="hidden" id="date" name="selected"/>
<select id="city" class="cities" data-role="none" name="City">
<option value="">Anyplace</option>
.
.
.
</select>
<select id="type" class="cities" data-role="none" name="Event">
<option value="">Anything</option>
.
.
.
</select>
<input type="submit" class="button" value="Ok Go!"/>
<input id="current" name="current" type="hidden"/>
</form>
</div>
答案 0 :(得分：1)
您可以使用jQuery Ajax
执行此类操作在头标记或页脚中使用以下代码
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript>
$('document').ready(function(){ //after page load
$('.button').on('click', function(e){
e.preventDefault(); //prevent default action
$.ajax({
'url': 'result.php',
'type: 'POST',
'success': function(response){
$('#welcome').html(response);
}
});
});
});
</script>
答案 1 :(得分：1)
valit是让你的页面重新加载的 action =“result.php”
你应该尝试给你的表单提供一个id，并使用一个简单的ajax调用：
$("#formId").submit(function() {
$.ajax({
url: 'result.php',
success: function(response) {
$("#welcome").setValue(response); // update the DIV
}
});
return false; // prevent form submitting
});
干杯
答案 2 :(得分：1)
如果您是通过AJAX执行此操作，则不需要<form>代码。 <form>代码仅在您发布到其他页面并期望视图更改/刷新时才有用。
此外，在此示例中使用<form>代码将导致页面刷新（并且jQuery插入的值将丢失），并为“隐藏字段CURRENT的设置值”按钮添加其他位。并不是说它可能在您的真实世界应用程序中很重要，但仅限于FYI。
Ajax包含在你的javascript代码中，看起来像这样：
$('#mySelect').change(function() {
var sel = $(this).val();
//alert('You picked: ' + sel);
$.ajax({
type: "POST",
url: "your_php_file.php",
data: 'theOption=' + sel,
success: function(whatigot) {
alert('Server-side response: ' + whatigot);
} //END success fn
}); //END $.ajax
}); //END dropdown change event
请注意，PHP文件中的数据 ECHO 来自AJAX调用的成功函数中的HTML文档，必须处理有即可。这就是您将接收到的数据插入DOM的位置。
例如，假设您的HTML文档包含id="myDiv"的DIV。要将PHP中的数据插入到HTML文档中，请将以下行替换为alert('Server-side response: ' + whatigot);：
$('#myDiv').html(whatIgot);
的Presto！您的DIV现在包含从PHP文件回显的数据。
这是一个适用于您自己的示例的工作解决方案，使用AJAX：
HTML MARKUP：
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#mybutt').on('click', function(e){
e.preventDefault(); //prevent default action
var ct = $('#city').val();
var dt = $('#date').val()
var ty = $('#type').val();
var curr = $('#current').val();
$.ajax({
url: 'result.php',
type: 'POST',
data: 'ct=' +ct+ '&dat=' +dt+ '&t=' +ty+ '&curr=' +curr,
success: function(response){
$('#welcome').html(response);
}
});
});
$('#mycurr').click(function(){
var resp = prompt("Please type something:","Your name");
$('#current').val(resp);
});
}); //END $(document).ready()
</script>
</head>
<body>
<div id="welcome">
<input type="hidden" id="date" name="selected"/>
<select id="city" class="cities" data-role="none" name="City">
<option value="sumwhere">Anyplace</option>
<option value="anutherwhere">Another place</option>
</select>
<select id="type" class="cities" data-role="none" name="Event">
<option value="sumthing">Anything</option>
<option value="anutherthing">Another thing</option>
</select>
<input type="submit" id="mybutt" class="button" value="Ok Go!"/>
<input type="submit" id="mycurr" class="button" value="Set value for hidden field CURRENT"/>
<input id="current" name="current" type="hidden"/>
</div>
</body>
</html>
PHP处理器文件： result.php
$ct = $_POST['ct'];
$date = $_POST['dat'];
$typ = $_POST['t'];
$cu = $_POST['curr'];
if ($date == '') {
$date = 'Some other date';
}
$r = '<h1>Results sent from PHP</h1>';
$r .= 'Selected city is: [' .$ct. ']<br />';
$r .= 'Selected date is: [' .$date. ']<br />';
$r .= 'Selected type is: [' .$typ. ']<br />';
$r .= 'Hidden field #CURRENT is: [' .$cu. ']<br />';
$r .= '<h2>And that\'s all she wrote....</h2>';
echo $r;