Learn and practice four forms while learning Ajax+PHP

  • 2020-03-31 17:09:02
  • OfStack

When talking about Form, it involves a problem of sending request mode (GET and POST). The use and difference of GET and POST are not explained in detail in this article. Generally, it is more commonly used for Web development due to the implicit value of POST and the large amount of data transferred. In this example, functions.js is modified to create the XMLHttp object program as a function processajax.
 
function processajax (serverPage, obj, getOrPost, str){ 
//Write the create XMLHttpRequest object to the getxmlhttp() function and get the object
xmlhttp = getxmlhttp (); 
//GET (as in previous articles)
if (getOrPost == "get"){ 
xmlhttp.open("GET", serverPage); 
xmlhttp.onreadystatechange = function(){ 
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){ 
obj.innerHTML = xmlhttp.responseText; 
} 
} 
xmlhttp.send(null); 
} 
//POST way
else{ 
//The third true parameter turns on the asynchronous function
xmlhttp.open("POST", serverPage, true); 
//Create a POST request
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=GB2312"); 
xmlhttp.onreadystatechange = function() { 
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
obj.innerHTML = xmlhttp.responseText; 
} 
} 
//Form passes values
xmlhttp.send(str); 
} 
} 

In the following figure, when the "Submit" button is clicked, the submitform function (functions.js) will be fired. In this function, the getformvalues function will be used to check whether the Form contents have been filled in, otherwise it will prompt which items are not filled in. When the check passes, the process_task.php program is called, which writes the Form value to the database.
(link: https://www.jb51.net/upload/2009-11/20091127172944480.png)  
Submitform function:
 
function submitform (theform, serverPage, objID, valfunc){ 
var file = serverPage; 
//Check the Form values
var str = getformvalues(theform,valfunc); 
//Fill in all forms
if (aok == true){ 
obj = document.getElementById(objID); 
//Run Ajax to pass values
processajax(serverPage, obj, "post", str); 
} 
} 

The getformvalues function:
 
function getformvalues (fobj, valfunc){ 
var str = ""; 
aok = true; 
var val;     
//Traverses all objects in the Form
for(var i = 0; i < fobj.elements.length; i++){ 
if(valfunc){ 
if (aok == true){ 
val = valfunc (fobj.elements[i].value,fobj.elements[i].name); 
if (val == false){ 
aok = false; 
} 
} 
} 
str += fobj.elements[i].name + "=" + escape(fobj.elements[i].value) + "&"; 
} 
//Return the Form value as a String
return str; 
} 

Process_task. PHP program:
 
<?php 
require_once ("dbconnector.php"); 
opendatabase(); 
//Data preprocessing
$yourname = strip_tags (mysql_real_escape_string ($_POST['yourname'])); 
$yourtask = strip_tags (mysql_real_escape_string ($_POST['yourtask'])); 
$thedate = strip_tags (mysql_real_escape_string ($_POST['thedate'])); 
//Create Insert statement
$myquery = "INSERT INTO task (name, thedate, description) VALUES ('$yourname','$thedate','$yourtask')"; 
//Execute SQL statement
if (!mysql_query ($myquery)){ 
header ("Location: theform.php?message=There was a problem with the entry."); 
exit; 
} 
//Return success information
header ("Location: theform.php?message=Success"); 
?> 

(link: http://xiazai.jb51.net/200911/yuanma/ajax_php_biaodan.rar)

Related articles: