Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "learning the examples of forms related to ajax-related functions". In the operation of actual cases, many people will encounter such a dilemma, so let me lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The first one is used to load a HTML without refresh.

The second is to convert the form data into a string of request strings.

The third is the implementation of a non-refresh submission form that combines function one and function two.

Another point to mention is that file uploads cannot be processed without refreshing the form submission, mainly because of the browser's security settings. Currently, uploads without refresh are generally implemented with iframe. About this, we can find a lot in google.

Although there are many excellent ajax classes and functions on the Internet, maybe these functions are of some use to you, so I released them.

It can be downloaded here.

The code is as follows:

/ / @ desc load a page (some html) via xmlhttp,and display on a container

/ / @ param url the url of the page will load,such as "index.php"

/ / @ param request request string to be sent,such as "action=1&name=surfchen"

/ / @ param method POST or GET

/ / @ param container the container object,the loaded page will display in container [XSS _ clean]

/ / @ usage

/ / ajaxLoadPage ('index.php','action=1&name=surfchen','POST',document.getElementById (' my_home'))

/ / suppose there is a html element of "my_home" id,such as ""

/ / @ author SurfChen

/ / @ url http://www.surfchen.org/

/ / @ license http://www.gnu.org/licenses/gpl.html GPL

Function ajaxLoadPage (url,request,method,container)

{

Method=method.toUpperCase ()

Var loading_msg='Loading...';//the text shows on the container on loading.

Var loader=new XMLHttpRequest;//require Cross-Browser XMLHttpRequest

If (method=='GET')

{

Urls=url.split (?

If (urls [1] = =''| | typeof urls [1] = = 'undefined')

{

Url=urls [0] + "?" + request

}

Else

{

Url=urls [0] + "?" + urls [1] + "&" + request

}

Request=null;//for GET method,loader should send NULL

}

Loader.open (method,url,true)

If (method== "POST")

{

Loader.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded")

}

Loader.onreadystatechange=function () {

If (loader.readyState==1)

{

Container [XSS _ clean] = loading_msg

}

If (loader.readyState==4)

{

Container [XSS _ clean] = loader.responseText

}

}

Loader.send (request)

}

/ / @ desc transform the elements of a form object and their values into request string (such as "action=1&name=surfchen")

/ / @ param form_obj the form object

/ / @ usage formToRequestString (document.form1)

/ / @ notice this function can not be used to upload a file.if there is a file input element,the func will take it as a text input.

/ / as I know,because of the security,in most of the browsers,we can not upload a file via xmlhttp.

/ / a solution is iframe.

/ / @ author SurfChen

/ / @ url http://www.surfchen.org/

/ / @ license http://www.gnu.org/licenses/gpl.html GPL

Function formToRequestString (form_obj)

{

Var query_string=''

Var and=''

/ / alert (form_obj.length)

For (iSuppli)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.