Обновление списка на странице с использованием HTML-формы и AJAX

-3

На странице есть textbox и кнопка submit. Текстовое поле принимает элемент. При добавлении элемента список на странице должен обновлять и отображать новые элементы с помощью 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, чтобы мы могли вам помочь.
  • 1
    Попробуйте написать что-нибудь самостоятельно. Посмотрите, что вы придумали. Похоже, у вас есть хорошее представление о том, что должно произойти. Мы здесь не для того, чтобы писать это для вас, просто чтобы помочь вам решить проблему.
Показать ещё 1 комментарий
Теги:
forms
textbox

1 ответ

0

Вы хотите написать нам код?

Вы можете получить некоторые образцы здесь

http://sillythingsthatmatter.com/ajax/ajax3.php

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню