[英]Inserting a value to configure Ajax function upon clicking a link
我正在嘗試設置一個進行Ajax調用的函數,但是我必須承認,設置onclick事件時我無法理解正在發生的事情。 我正在嘗試進行Ajax調用,以從數據庫獲取字段並將其顯示給用戶。 這個想法是,用戶在輸入字段中鍵入一個姓氏,然后根據他們單擊的鏈接,我嘗試構建的功能將查詢結果顯示到數據庫中。 我在Ajax函數調用的腳本上使用PHP中的switch語句處理查詢,但無法在Javascript代碼上設置處理此行為的變量。
我有這樣的Javascript代碼:
var ajaxRequest = ajaxFunction();
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
} return ajaxRequest;
}
function process() {
id="default";
profesional = document.getElementById('profesional');
dotal = document.getElementById('dot');
proyecta = document.getElementById('proy');
proyecta_A = document.getElementById('proy_af');
gastosM = document.getElementById('gastos_med');
autos = document.getElementById('aut');
polifam = document.getElementById('polif');
profesional.onclick=function() {
id="prof";
return id;
}
dotal.onclick=function() {
id="dotal";
return id;
}
proyecta.onclick=function() {
id="proyecta";
return id;
}
proyecta_A.onclick=function() {
id="proyAf";
return id;
}
gastosM.onclick=function() {
id="gastos_medicos";
return id;
}
autos.onclick=function() {
id="autos";
return id;
}
polifam.onclick=function() {
id="polifam";
return id;
}
if(ajaxRequest.readyState==4 || ajaxRequest.readyState==0) {apellido = encodeURIComponent(document.getElementById('query').value)
if (apellido != undefined) {
ajaxRequest.open("GET", 'adminsrc.php?buscarregistro=' +apellido +'&id='+id, true)
ajaxRequest.send("");
ajaxRequest.onreadystatechange=handleServerResponse;
}
}
else setTimeout('process()',1000);
}
function handleServerResponse(){
{
if (ajaxRequest.readyState==4) {
if(ajaxRequest.status==200) {
respuesta=ajaxRequest.responseXML;
respuestadoc = respuesta.documentElement;
if (apellido != undefined) {
ident = respuesta.getElementsByTagName('identidad')[0];
result = ident.firstChild;
refrescar = respuesta.getElementsByTagName('identidad')[1];
actualizar = refrescar.firstChild;
if(result!=undefined) {
resultado = result.data;
document.getElementById('profesreg').setAttribute('value', resultado);
document.getElementById('dotalreg').setAttribute('value', resultado);
document.getElementById('gmmreg').setAttribute('value', resultado);
document.getElementById('proyectareg').setAttribute('value', resultado);
document.getElementById('proyecta2reg').setAttribute('value', resultado);
document.getElementById('autosreg').setAttribute('value', resultado);
document.getElementById('polifreg').setAttribute('value', resultado);
}
if(actualizar!=undefined) {
actualiza = actualizar.data;
document.getElementById('actual_1').setAttribute('value', actualiza);
document.getElementById('actual_2').setAttribute('value', actualiza);
document.getElementById('actual_3').setAttribute('value', actualiza);
document.getElementById('actual_4').setAttribute('value', actualiza);
document.getElementById('actual_5').setAttribute('value', actualiza);
document.getElementById('actual_6').setAttribute('value', actualiza);
document.getElementById('actual_7').setAttribute('value', actualiza);
}
msje = respuestadoc.firstChild.childNodes[0];
if (msje !=undefined) {
mess = msje.data;
document.getElementById("res").innerHTML = "<h4>"+ mess +"</h4>";
}
}
setTimeout('process()',1000);
}
else alert ('hubo un problema al conectarse con el servidor: ' + ajaxRequest.statusText);
}
}
}
//-->
最后一部分只是在表單中設置隱藏字段的值,以便PHP識別這些值(它們被設置為更新數據庫中的某些字段)。 但我必須說,我非常喜歡javascript(我從不擅長於此)。 有什么建議嗎?
@Mate xml文件的構建方式如下:
<identificacion>
<response>
Se encontró al asegurado con nombre Mara Fernanda Bravo Palomino, número de póliza 27608165, la cual vence el 2003-04-05 y cuyos beneficiarios contratados son Ana Camila Lpez Bravo
</response>
<identidad>Bravo Palomino</identidad>
<identidad>si</identidad>
</identificacion>
一次(幾周前),我已經使用了如下功能:
function process() {
if(ajaxRequest.readyState==4 || ajaxRequest.readyState==0) {apellido = encodeURIComponent(document.getElementById('query').value)
if (apellido != undefined) {
ajaxRequest.open("GET", 'adminsrc.php?buscarregistro=' +apellido, true)
ajaxRequest.send("");
ajaxRequest.onreadystatechange=handleServerResponse;
}
}
else setTimeout('process()',1000);
}
和上面的handleServerResponse函數; 但是如您所見,我只能通過復雜的迭代從xml中提取文本節點。 當然,有一種更簡單的方法。
1)下載jQuery庫並鏈接到正確的路徑!
2)我對html和xml響應有點盲目,但我認為您可以解決。
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function AjaxCall(id) {
//Obtengo el appelido.
var apellido = $('#query').val();
//Armo la url con el querystring
var urlPhp = 'adminsrc.php?buscarregistro=' + apellido + '&id=' + id;
$.ajax({
type: "GET",
url: urlPhp,
contentType: "charset=utf-8",
dataType: "xml",
success: function (xml) {
successProcess(xml);
},
error: function (msg) {
alert("error");
}
});
}
//Proceso el xml si estuvo Ok.
function successProcess(xml) {
//Revisar bien el XML devuelto
var identidades = $(xml).find("identidad");
result = identidades[0];
refresh = identidades[1];
message = $(xml).find('mensaje');
SetResult(result);
SetActualizar(refresh);
SetMsj(message);
}
//Seteo el resultado en los valores de los controles.
function SetResult(resultado) {
if (result != undefined) {
$('#profesreg').val(resultado);
$('#dotalreg').val(resultado);
$('#gmmreg').val(resultado);
$('#proyectareg').val(resultado);
$('#proyecta2reg').val(resultado);
$('#autosreg').val(resultado);
$('#polifreg').val(resultado);
}
}
//Seteo los dato actualizados
function SetActualizar(actualiza) {
if (actualiza != undefined) {
$('#actual_1').val(actualiza);
$('#actual_2').val(actualiza);
$('#actual_3').val(actualiza);
$('#actual_4').val(actualiza);
$('#actual_5').val(actualiza);
$('#actual_6').val(actualiza);
$('#actual_7').val(actualiza);
}
}
//Muestro el mensaje
function SetMsj(msje) {
if (msje != undefined) {
$('#res').html("<h4>" + msje + "</h4>");
}
}
//Este evento se dispara cuando carga el documento.
$(document).ready(function () {
$('#profesional').click(function () { AjaxCall('prof') });
$('#dot').click(function () { AjaxCall('dotal') });
$('#proy').click(function () { AjaxCall('proyecta') });
$('#proy_af').click(function () { AjaxCall('proyAf') });
$('#gastos_med').click(function () { AjaxCall('gastos_medicos') });
$('#aut').click(function () { AjaxCall('autos') });
$('#polif').click(function () { AjaxCall('polifam') });
});
</script>
</head>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.