2012-01-10 10 views
-3

ページにはtextboxsubmitボタンがあります。テキストボックスは項目を受け入れます。アイテムを追加すると、ページ上のリストが更新され、ajaxを使用して新しいアイテムが表示されます。htmlフォームとajaxを使用してページのリストを更新する

上記の項目はそのままです。

私がこれまでに書いたコード: 1)123.html:

<html> 
<head> 
<title>PHP using AJAX</title> 
<script type="text/javascript"> 

var time_variable; 

function getXMLObject() //XML OBJECT 
{ 
    var xmlHttp = false; 
    try { 
    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP") // For Old Microsoft Browsers 
    } 
    catch (e) { 
    try { 
     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") // For Microsoft IE 6.0+ 
    } 
    catch (e2) { 
     xmlHttp = false // No Browser accepts the XMLHTTP Object then false 
    } 
    } 
    if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { 
    xmlHttp = new XMLHttpRequest();  //For Mozilla, Opera Browsers 
    } 
    return xmlHttp; // Mandatory Statement returning the ajax object created 
} 

var xmlhttp = new getXMLObject(); //xmlhttp holds the ajax object 

function ajaxFunction() { 
    var getdate = new Date(); //Used to prevent caching during ajax call 
    if(xmlhttp) { 
    var txtname = document.getElementById("txtname"); 
    xmlhttp.open("POST","321.php",true); //calling 321.php using POST method 
    xmlhttp.onreadystatechange = handleServerResponse; 
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
    xmlhttp.send("txtname=" + txtname.value); //Posting txtname to PHP File 
    } 
} 

function handleServerResponse() { 
    if (xmlhttp.readyState == 4) { 
    if(xmlhttp.status == 200) { 
     document.getElementById("message").innerHTML=xmlhttp.responseText; //Update the HTML Form element 
    } 
    else { 
     alert("Error during AJAX call. Please try again"); 
    } 
    } 
} 
</script> 
<body> 
<form name="myForm"> 
<table> 
<tr> 
    <td>Enter Name</td> 
    <td><input type="text" name="txtname" id="txtname" /></td> 
</tr> 
<tr> 
    <td colspan="2"><input type="button" value="Submit" onclick="ajaxFunction();" /></td> 
</tr> 
</table> 
<div id="message" name="message"></div> 
</form> 
</body> 
</head> 
</html> 

2)私はアイテムの出力リストを取得することができています321.php

<?php 

$a = $_POST["txtname"]; 

echo ".$a."; 
?> 

(何私はテキストボックスに入力します)をリフレッシュせずに同じページに表示します。 は、以前のアイテムをそのまま維持してリストに追加する方法を知りたがっています。すなわち、以前の出力を保持する更新リスト ありがとう。

+1

得ることができますか?私たちがあなたを助けるためには、実際にHTMLとJSを表示する必要があります。 – PeeHaa

+1

自分で書いてみてください。あなたが出てくるものを見てください。あなたは何が起こる必要があるか、良い考えがあるようです。私たちはあなたのためにそれを書くのではなく、トラブルシューティングに役立つだけです。 – idrumgood

+0

このコードは、ページ上に項目を表示するためにうまくいきました。以前の項目の出力を保存し、さらに更新するたびにリストに追加したい場合、PHP(またはjs)にどのような変更を加える必要があるかを知りたいだけでした。 – prit2192

答えて

関連する問題