إرسال طلب HTTP دون XHR في معالج الحدث
-
06-07-2019 - |
سؤال
وكيفية إرسال طلب HTTP مع أي آخر / الحصول على طريقة استخدام جافا سكريبت باعتبارها eventhandler؟ شكر! بول
المحلول
حسنا، كنت لا تريد استخدام اياكس. يمكنك استخدام معالج الحدث لتقديم نموذج!
<a href='#' onclick='cow_submit("zoodle")'>send</a>
<form method='post' id='formie' action='find_some_action.php'>
<input type='hidden' id='snoutvar' name='snoutvar' value='snout'>
</form>
<script>
function cow_submit(a_var_to_set){
var plip=document.getElementById('formie');
var snout=document.getElementById('snoutvar');
snout.value=a_var_to_set;
plip.submit();
}
نصائح أخرى
ونموذج التعليمات البرمجية:
var client = new XMLHttpRequest();
client.onreadystatechange = handler;
client.open("GET", "test.xml");
client.send();
function handler()
{
// your handler
}
ويمكنك استخدام مدعوم لإرسال طلب من جافا سكريبت
وإرسال طلب GET
var url = "get_data.php";
var params = "lorem=ipsum&name=binny";
http.open("GET", url+"?"+params, true);
http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(null);
وإرسال طلب POST
var url = "get_data.php";
var params = "lorem=ipsum&name=binny";
http.open("POST", url, true);
//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(params);
ولا ننسى لترميز المعلمات باستخدام encodeURIComponent
لترميز قيمة المعلمة في حالة إدخال المستخدم
ومنها مثلا.
params="paramName="+encodeURIComponent(paramValue);
والطبقة القياسية للقيام بذلك هي XmlHttpRequest
، ولكن ليست مدعومة من الجميع. على بعض المتصفحات لديك لاستخدام ActiveXObject("Microsoft.XMLHTTP")
بدلا من ذلك.
وانظروا إلى مسج النظام الذي يوفر HTTP تحميل (AJAX نمط) أساليب بغض النظر عن واجهات برمجة التطبيقات متصفح الأساسية (وبالتالي تجنب الكثير من الرمز المبين في الإجابة Tzury ل).
وثائق مسج AJAX هي في http://docs.jquery.com/Ajax
ويجب عليك محاولة لإضافة سلسلة في حقل مخفي ومن ثم استدعاء form.submit () لتقديم النموذج في صفحة تعريف في العمل.
<script type="text/javascript">
function doTestFormSubmit(yourString) {
document.getElementById("myString").value=myString;
document.getElementById("testForm").submit();
}
</script>
<form name="testForm" id="testForm" action="yourDesiredPage.php" method="post">
<input type="hidden" name="myString" id="myString" value=""/>
</form>
واياكس دروس ( http://code.google.com/ ايدو / اياكس / دروس / اياكس-tutorial.html )
var obj;
function ProcessXML(url) {
// native object
if (window.XMLHttpRequest) {
// obtain new object
obj = new XMLHttpRequest();
// set the callback function
obj.onreadystatechange = processChange;
// we will do a GET with the url; "true" for asynch
obj.open("GET", url, true);
// null for GET with native object
obj.send(null);
// IE/Windows ActiveX object
} else if (window.ActiveXObject) {
obj = new ActiveXObject("Microsoft.XMLHTTP");
if (obj) {
obj.onreadystatechange = processChange;
obj.open("GET", url, true);
// don't send null for ActiveX
obj.send();
}
} else {
alert("Your browser does not support AJAX");
}
}
function processChange() {
// 4 means the response has been returned and ready to be processed
if (obj.readyState == 4) {
// 200 means "OK"
if (obj.status == 200) {
// process whatever has been sent back here:
// anything else means a problem
} else {
alert("There was a problem in the returned data:\n");
}
}
}