通过Ajax提交表单并更新结果div [英] submit a form via Ajax and update a result div
问题描述
我使用的是自我提交的表单来处理数据，但是现在我需要单独处理它，所以现在我需要提交表单，返回结果并将其放在div中.使用 AJAX 似乎是一种很好的方法，可以使数据返回到表单所在的原始页面.我看过很多例子，但我不太了解如何做或如何工作.
说我想将此表单数据从 index.php 发送到我的流程页面 twitterprocess.php 我需要做些什么并使它返回以显示数据已处理.
< form method ="POST" action ="twitterprocess.php">井号:<输入类型=文本" name =井号"/>< br/>< input type ="submit" value =提交主题标签！"/></form> 这就是我一直用来显示结果的东西.
<?php foreach($ results as $ result){$ tweet_time = strtotime($ result-> created_at);?>< div>< div class ="tweet"><?php echo displayTweet($ result-> text)，"\ r \ n";?>< div class ="user"><?php echo< strong>已发布</strong>".date('j/n/y H:i:s'，$ tweet_time)?>< strong>通过</strong>< rel ="nofollow" href ="http://twitter.com/<?php echo $ result-> from_user?>"><?php echo $ result-> from_user?></a>/div</div>< br/>< ;?}?> 我是AJAX的新手，但是任何指导将不胜感激
**使用AJAX时，其他页面上生成的输出就是该页面的结果.
*现在，当您要发布数据并通过使用AJAX检索结果时，则在HTML表单的一部分中，不要将type ="submit"用于按钮，而只需使用type ="button".
*动作属性应留空，因为您将通过AJAX代码触发动作.
*请在下面的代码段中休息所有解决方案:
下面是HTML代码以及AJAX
<！DOCTYPE html>< html>< head>< meta charset ="utf-8">< title>通过AJAX进行简单表单处理//title< script type ="text/javascript">函数loadXmlDoc(fname，lname){var xmlhttp;如果(window.XMLHttpRequest){xmlhttp =新的XMLHttpRequest();}别的{xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange = function(){如果(xmlhttp.readyState == 4&& xmlhttp.status == 200){document.getElementById("ajaxify").innerHTML = xmlhttp.responseText;}}xmlhttp.open("POST"，"demo_ajax3.php"，true);xmlhttp.setRequestHeader("Content-type"，"application/x-www-form-urlencoded");xmlhttp.send("fname =" + fname +&" +"lname =" + lname);}</script></head><身体>< p>< span id ="ajaxify"& nbsp;</span></p>< form id ="frm" action =#"><输入type ="text" name ="fn"/><输入type ="text" name ="ln"/><输入类型=按钮" name =提交" value =提交" onclick ="loadXmlDoc(fn.value，ln.value)"/></form></body></html> 下面是上面代码中使用的PHP代码
<?php$ fname = $ _POST ["fname"];$ lname = $ _POST ["lname"];回声你好".$ fname.".$ lname;?> I was using a self submitting form to process the data but I now need to process it separately so now I need to submit a form, return the results and place it in a div. It seems using AJAX is a good way to do this to have the data return to the original page where the form is. I have had a look at alot of examples and I don't really understand how to do it or really how its working.
Say I wanted to send this form data from index.php to my process page twitterprocess.php what do I need to do and get it to return to display the data processed.
<form method="POST" action="twitterprocess.php">
Hashtag:<input type="text" name="hashtag" /><br />
<input type="submit" value="Submit hashtag!" />
</form>
This is what I have been using to display the results.
<?php foreach($results as $result) {
$tweet_time = strtotime($result->created_at);?>
<div>
<div class="tweet"> <?php echo displayTweet($result->text),"\r\n"; ?>
<div class="user"><?php echo "<strong>Posted </strong>" . date('j/n/y H:i:s ',$tweet_time) ?><strong> By </strong><a rel="nofollow" href="http://twitter.com/<?php echo $result->from_user ?>"><?php echo $result->from_user ?></a></div>
</div>
<br />
<? } ?>
I'm new to AJAX but any guidance would be greatly appreciated
*When you use AJAX the output generated on other page is the result for this page.
*Now when you want to post data and retrieve results through the use of AJAX then in form part of your html don't use type="submit" for button, but simply go for type="button".
*action attribute should be left blank as you are going to trigger the action through your AJAX code.
*Well rest all your solution in the code snippet below:
Below is the HTML code along with AJAX
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Form Handling Through AJAX</title>
<script type="text/javascript">
function loadXmlDoc(fname, lname){
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById("ajaxify").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "demo_ajax3.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("fname=" + fname + "&" + "lname=" + lname);
}
</script>
</head>
<body>
<p>
<span id="ajaxify"> </span>
</p>
<form id="frm" action="#">
<input type="text" name="fn" />
<input type="text" name="ln" />
<input type="button" name="submit" value="submit" onclick="loadXmlDoc(fn.value, ln.value)" />
</form>
</body>
</html>
Below is the PHP code that is used in above code
<?php
$fname = $_POST["fname"];
$lname = $_POST["lname"];
echo "Hello " . $fname . " " . $lname;
?>
这篇关于通过Ajax提交表单并更新结果div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
