Submission of forms in HTML and implementation of non-jump page processing return value __html

In this article, the component that uses jquery in HTML implements the form submission and processes the return value in the current page.

1. Using Ajaxform method

(1), Import JS file

Need to import the relevant JS file. Using the Ajaxform method requires the use of jquery and Jquery-form two JS files. Such as:

	<script type= "Text/javascript" src= "Http://127.0.0.1/CarAppStore/js/jquery/jquery-1.9.0.min.js" ></ script>	
	<script type= "Text/javascript" src= "Http://127.0.0.1/CarAppStore/js/jquery/jquery-form.js" > </script>	

(2), bind the form

Form bindings It is generally defined in $ (document). Ready (function () {}), which enables the form to post to the target without refreshing the page. Such as:

	 $ (document). Ready (function () {
	        $ ("#formLogin"). Ajaxform (function (data) {
	              alert ("Post success." + data);
	              Alert ("post success.");});		    
	 

Formlogin is the ID of the form.

(3), write the form submission code

The following is a simple form with a submit address of userlogin.shtml, and both success and failure return the JSON packet, which is processed in the method that is bound above.

		<form id= "Formlogin" name= "Formlogin" action= "userlogin.shtml" method= "POST" >
			
 



(4), Operation effect






2, using jquery provided by the Get/post method

(1), the introduction of JS file

Using jquery requires the introduction of jquery-related JS files, such as:


<script type= "Text/javascript" src= "Http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js" ></script >	
 

(2), JS in the use of jquery for submission and processing return results

Use the post submit data to the Resource.shtml page, the parameter action and the ID, and return a JSON data that is handled appropriately by judging the result field in the JSON data.


<script type= "Text/javascript" >	 
        function deleteresource (id)  {
		    $ ("#div_edit"). Hide ();
			$.post ("resource.shtml", {
				action: "Delete",
				Id:id,
			}, function (data) {
			    var obj = new function ("return "+ data)" ();
			    if (obj.result== "OK")  {
			       location.reload ();
			    }	
			    else {
			       $.noty.consumealert ({layout: ' Topcenter ', type: ' Error ', dismissqueue:true});
			       alert (obj.message);}}	
			);
</script>
 

3. Using hidden iframe

Use the hidden IFRAME page load callback to get the submitted return value, involving the same domain name and different domain names, where the same domain name is implemented using an IFRAME to get the return value and handle accordingly. Let's look at the following example:


<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

The above example implements a simple login form that uses jquery validate for form validation, encrypts the password using MD5 before the form is submitted, and writes the cryptographic results to a hidden input, before invoking Ajaxsubmit for submission. After the commit is successful, the page is redirected to an incoming parameter page. Use Noty to pop up a prompt dialog box when you fail. Demo can modify the verification itself. The effect of the run failure is as follows, which is directed to the new page when it succeeds.