Four forms of learning and practicing Ajax + PHP

The previous article has learned how to use Ajax and PHP to read data from the database, so that you can dynamically obtain the latest data from the database. This article continues to introduce writing data to the database through forms. Ajax

When it comes to Form, it involves a request sending method (GET and POST). the usage and difference of GET and POST are not described in detail in this article, generally, it is commonly used in Web development because the POST value is implicit and the amount of data transmitted is large. In this example, modify functions. js to create an XMLHttp object program as a function processajax.
The code is as follows:
Function processajax (serverPage, obj, getOrPost, str ){
// Write the created XMLHttpRequest object to the getxmlhttp () function and obtain the object.
Xmlhttp = getxmlhttp ();
// GET method (same as 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 method
Else {
// The asynchronous function is enabled for the third true parameter.
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 value passing
Xmlhttp. send (str );
}
}

When you click "Submit" in, the submitform function (functions. js). In this function, the getformvalues function is used to check whether all Form content is filled. Otherwise, the system prompts which Form content is not filled. After the check is passed, the process_task.php program is called, which writes the Form value to the database.

Submitform function:
The code is as follows:
Function submitform (theform, serverPage, objID, valfunc ){
Var file = serverPage;
// Check the Form value
Var str = getformvalues (theform, valfunc );
// Fill in all forms
If (aok = true ){
Obj = document. getElementById (objID );
// Run Ajax to upload values
Processajax (serverPage, obj, "post", str );
}
}

Getformvalues function:
The code is as follows:
Function getformvalues (fobj, valfunc ){
Var str = "";
Aok = true;
Var val;
// Traverse all objects in 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 in String format
Return str;
}

Process_task.php program:
The code is as follows:
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 an Insert statement
$ Myquery = "insert into task (name, thedate, description) VALUES ('$ yourname',' $ thedate', '$ yourtask ')";
// Execute the SQL statement
If (! Mysql_query ($ myquery )){
Header ("Location: theform. php? Message = There was a problem with the entry .");
Exit;
}
// Returns the success message.
Header ("Location: theform. php? Message = Success ");
?>

Source code download