最简单的方法,使表单提交没有刷新 [英] Easiest Way To Make A Form Submit Without Refresh
问题描述
我一直在试图创建一个简单的计算器。使用PHP我设法从POST输入域和跳转菜单的值,但课程后,提交表单刷新。
I have been trying to create a simple calculator. Using PHP I managed to get the values from input fields and jump menus from the POST, but of course the form refreshes upon submit.
使用JavaScript我尝试使用
Using Javascript i tried using
function changeText(){
document.getElementById('result').innerHTML = '<?php echo "$result";?>'
但这将继续点击该按钮,因为它可能是没有被提交的表单POST从没有获得价值后给出的0的答案。
but this would keep giving an answer of "0" after clicking the button because it could not get values from POST as the form had not been submitted.
所以我试图找出两种最简单的方法通过AJAX或类似的东西去做
So I am trying to work out either the Easiest Way to do it via ajax or something similar
或获得的跳转菜单的选定值与JavaScript的。
or to get the selected values on the jump menu's with JavaScript.
我已经阅读了一些Ajax例子在线,但他们是相当混乱(不熟悉的语言)
I have read some of the ajax examples online but they are quite confusing (not familiar with the language)
推荐答案
使用 jQuery的 +的JSON 联合提交的形式是这样的:
Use jQuery + JSON combination to submit a form something like this:
test.php的:
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jsFile.js"></script>
<form action='_test.php' method='post' class='ajaxform'>
<input type='text' name='txt' value='Test Text'>
<input type='submit' value='submit'>
</form>
<div id='testDiv'>Result comes here..</div>
_test.php:
<?php
$arr = array( 'testDiv' => $_POST['txt'] );
echo json_encode( $arr );
?>
jsFile.js
jQuery(document).ready(function(){
jQuery('.ajaxform').submit( function() {
$.ajax({
url : $(this).attr('action'),
type : $(this).attr('method'),
dataType: 'json',
data : $(this).serialize(),
success : function( data ) {
for(var id in data) {
jQuery('#' + id).html( data[id] );
}
}
});
return false;
});
});
这篇关于最简单的方法,使表单提交没有刷新的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!