Ajax réalise une liaison secondaire via la soumission asynchrone XML

Cette fois, je vais vous présenter Ajax pour obtenir une liaison secondaire via une soumission asynchrone XML. Quelles sont les précautions pour qu'Ajax puisse obtenir une liaison secondaire via une soumission asynchrone XML. regarder.

J'ai déjà écrit sur l'obtention d'informations sur la province et la ville à partir du tableau JavaScript pour obtenir une liaison secondaire, mais il semble qu'il existe de nombreux besoins pour obtenir des informations à partir de la base de données, il faut donc être soumis de manière asynchrone , l'idée d'actualisation partielle est mise en œuvre pour améliorer les problèmes d'interaction des utilisateurs

La première méthode est la méthode XML

1. Tout d'abord, Dans le JavaScript de la page jsp, ce code est universel, il est donc placé en dehors de la fonction et peut être utilisé par d'autres fonctions

var xhr=false;
//创建XMLHttpRequst对象
if(window.XMLHttpRequest)
{
xhr=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
xhr=false;
}

2. Obtenez la valeur de la valeur de la province sélectionnée et transmettez la valeur au servlet via une soumission asynchrone

//获取城市的信息
function getCity()
{
//省份下拉框的对象
var provinceobj=document.getElementById("province");
//被选择的省份的索引
var index=provinceobj.selectedIndex;
//被选择的省份的value值
var provincevalue=provinceobj[index].value;
//被选择的省份的text值
var province=provinceobj[index].Text;
alert(provincevalue);
var url="<%=basepath%>CityServlet";/* post请求不在url上带参数 */
<%-- var url="<%=basepath%>CityServlet?provincevalue="+provincevalue; --%>//get请求在url上带参数
xhr.open("post",url,true);//设置为post提交方式，true表示为异步提交
//post提交方式的时候需要设置提交的编码
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//当状态改变时，调用callBack_XML来判断是否需要接收数据 
　　　　 xhr.onreadystatechange=callBack_XML;//xml方法 
　　　　//通过post提交的时候需要将数据放到send里传到servlet里 
　　　　xhr.send("provincevalue="+provincevalue); 
　　　　//xhr.send(null); 
　　}

3 Écrivez la fonction de rappelcallBack_XML. () Cette fonction détermine quand la réponse du serveur est normale, reçoit les données et les traite

function callBack_XML()//xml方法来获取
{
//城市下拉选择框的对象
var cityobj=document.getElementById("city");
//当请求状态等于4时，相应已完成，可以访问服务器响应并使用它
if(xhr.readyState==4)
{
//当状态为200时意味着，状态正常，未出错
if(xhr.status==200)
{
alert("响应成功");
//获取相应的xml文档
var cityxml=xhr.responseXML;
alert(cityxml);
//获取根元素
var root=cityxml.documentElement;
//获取根元素（city_info）下面的所有city元素
var cities=root.getElementsByTagName("city");
//将下拉框内容清除
cityobj.options.length=1;
for(var i=0;i<cities.length;i++)
{
var city=cities[i];
//获取节点的值
var cid=city.childNodes[0].firstChild.nodeValue;
var cname=city.childNodes[2].firstChild.nodeValue;
//alert(cid+" "+cname);
//放到下拉选择框里Option(文本内容,value值);
cityobj.options[cityobj.options.length]=new Option(cname,cid);
}
}
//当状态为404时，表示找不到页面
else if(xhr.status==404)
{
alert("Request URL is not exists!");
}
else
{
alert("Error:Status is:"+request.status);
}
}
}

4.

Ceci complète l'utilisation du XML pour mettre en œuvre la soumission asynchrone et l'actualisation partielle pour obtenir une liaison secondaire entre les provinces et les villes Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. veuillez faire attention aux autres articles connexes sur le site Web PHP chinois !

String provincevalue=request.getParameter("provincevalue");
System.out.println("省份编号："+provincevalue);
CityService cityservice=CityService.getCityService();
List<City> citylist=cityservice.getCity(provincevalue);
for(int i=0;i<citylist.size();i++)
{
System.out.println(citylist.get(i));
}
//生成xml页面
StringBuffer xml=new StringBuffer();
xml.append("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
xml.append("<city_info>");
for(City c : citylist)
{
xml.append("<city>");
xml.append("<id>"+c.getId()+"</id>");
xml.append("<cityid>"+c.getCityid()+"</cityid>");
xml.append("<cityname>"+c.getCity()+"</cityname>");
xml.append("<province>"+c.getFather()+"</province>");
xml.append("</city>");
}
xml.append("</city_info>");
//设置响应字符集编码，防止中文乱码
response.setCharacterEncoding("utf-8");
response.setContentType("text/xml;charset=utf-8");
//将xml文档写出去
PrintWriter writer=response.getWriter();
//因为只能写字符串，所以toString
writer.write(xml.toString());
writer.flush();
writer.close();
}

Lecture recommandée :

Comment implémenter la demande de file d'attente AJAX (avec code)

Avant, arrière et actualisation d'Ajax page Comment mettre en œuvre

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!