2016-02-25 9 views
6

मुझे कोई गंतव्य के साथ एक लंगर लिंक है के माध्यम से एक PHP स्क्रिप्ट निष्पादित करने के लिए AJAX का उपयोग करना है, लेकिन यह है एक onClick event:JavaScript फ़ंक्शन

<li><a href onClick='deletePost()'> Delete </a> </li> 

मैं समझता हूँ कि मैं यह कर सकते हैं कारण जावास्क्रिप्ट में सीधे execure नहीं PHP कोड ब्लॉक PHP की प्रकृति के लिए और यह एक सर्वर साइड भाषा है, इसलिए मुझे ऐसा करने के लिए AJAX का उपयोग करना होगा।

जब delete लिंक पर क्लिक किया जाता है, मैं इसे, लेकिन अपेक्षाकृत नया होने के कारण इस क्वेरी ( del_post.php)

<?php include("connect.php"); 

$delete_query = mysqli_query ($connect, "DELETE FROM user_thoughts WHERE id = 'id' "); 

?> 

मैं AJAX के समान अतीत प्रश्नों का उपयोग कर समझने की कोशिश की है पर अमल करने की जरूरत है, मैं पूरी तरह से अपनी भाषा को समझ नहीं सकता। यहाँ मैं क्या करने की कोशिश की है:

function deletePost() { 
     xmlhttp=new XMLHttpRequest(); 
     xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200){ 
      xmlhttp.open("GET", "del_post.php", false); 
      xmlhttp.send(); 
     } 
     }  
} 

लेकिन लिंक पर क्लिक सिर्फ http://localhost/ के लिए URL बदल जाता है।

+0

deletePost() फ़ंक्शन – Phiter

+0

'href = #' की शुरुआत पर रोकथाम जोड़ें और इसे ऑनक्लिक फ़ंक्शन के अंदर डिफ़ॉल्ट रूप से रोकें –

उत्तर

4

मेरा मानना ​​है कि (मुख्य) समस्या अपने खाली "href" विशेषता है। इसे हटाएं, या इसे href="#" या पुराने स्कूल href="javascript:void()" पर बदलें (बस इसे हटाएं, आईएमओ)।

थोड़ा समय के बाद से मैं XMLHttpRequest और कुछ jQuery's .ajax की तरह नहीं इस्तेमाल किया गया है, लेकिन मैं आपको इतना है कि यह सब करने की ज़रूरत (ज्यादातर आप इससे पहले कि आप राज्य को बदलने के लिए घड़ी .open/send करने की जरूरत है) लगता है:

var xmlHttpReq = new XMLHttpRequest(); 
if (xmlHttpReq) { 
    xmlHttpReq.open('GET', 'your-uri-here.php', true/false); 
    xmlHttpReq.onreadystatechange = function() { 
     if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) { 
      console.log('success! delete the post out of the DOM or some other response'); 
     } 
     else { 
      console.log('there was a problem'); 
     } 
    } 
    xmlHttpReq.send(); 
} 
3

क्या आप कृपया अपनी: del_post.php फ़ाइल प्रदान कर सकते हैं?

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      document.getElementById("yourname").innerHTML = xmlhttp.responseText; 
     } 

यह प्रतिक्रिया उदाहरण के लिए अपने PHP फ़ाइल से आ रही है:

function remove_record(ARG){ 
    if ($condition==true) 
     echo "TRUE"; 
    else 
     echo "FALSE"; 
} 
3
आम तौर पर आप एक AJAX अनुरोध में कॉलबैक का उपयोग करके एक

<div id="yourname"></div> 

में एक पाठ या अलर्ट दिखा सकता है

आपको एंकर टैग से href विशेषता को हटा देना चाहिए और सीएसएस के साथ तत्व को स्टाइल करना चाहिए।

इसके अलावा, अपनी स्क्रिप्ट इस तरह दिखना चाहिए:

<script> 
function deletePost() { 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
    if (xhttp.readyState == 4 && xhttp.status == 200) { 
     // Do something if Ajax request was successful 
    } 
    }; 
    xhttp.open("GET", "del_post.php", true); 
    xhttp.send(); 
} 
</script> 
3

आप कॉलबैक के अंदर http अनुरोध करने की कोशिश कर रहे हैं। तुम सिर्फ यह बाहर स्थानांतरित करने की आवश्यकता:

function deletePost() { 
    var xmlhttp = new XMLHttpRequest(); 
     xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       alert(xmlhttp.responseText); 
      } 
     }  
     xmlhttp.open("GET", "del_post.php", false); 
     xmlhttp.send(); 
} 

href विशेषता ताज़ा कर पाएगा निकाला जा रहा है। मेरा मानना ​​है कि एचटीएमएल 5 में मान्य है।

2

ठीक है ... मैं सिर्फ एक शौकिया हूँ, इसलिए मुझे टाइपिंग में कोई अशुद्धियों को माफ कृपया लेकिन यह काम करता है: एक प्रारूप मैं एक <a> तत्व में एक ajax कॉल के लिए उपयोग करते हैं:

<a href="javascript:" onclick="functionThatReallyCallsAjax()"> 

तो कि मेरे पास अधिक लचीलापन है (अगर मुझे AJAX भेजने से पहले कुछ जांचना है)।अब, एक ajax कॉल के लिए आप की जरूरत:

  1. क्या फ़ाइल
  2. फ़ाइल आप
  3. एक I/O त्रुटि होता है अगर
क्या करना है कहा जाता है से प्रतिक्रिया के साथ क्या करना है कॉल करने के लिए

तो हमारे पास यह कार्य है - मेरा नहीं, कहीं से हजारों लोगों के बीच छेड़छाड़ की गई - शायद यहां पर :) - और संभवत: अच्छी तरह से जाना जाता है, लेखक से मेरी माफ़ी, वह एक प्रतिभा है: यही वह है जिसे आप अजाक्स चीज़ के लिए कहते हैं, जहां ' यूआरएल 'वह फ़ाइल है जिसे आप' अजाक्स 'करना चाहते हैं,' सफलता 'फ़ंक्शन का नाम है जो परिणाम और त्रुटि से संबंधित है आईओ त्रुटियों से निपटने वाले फ़ंक्शन का नाम।

function doAjaxThing(url, success, error) { 
    var req = false; 
    try{ 
     // most browsers 
     req = new XMLHttpRequest(); 
    } catch (e){ 
     // IE 
     try{ 
      req = new ActiveXObject("Msxml2.XMLHTTP"); 
     } catch(e) { 
      // try an older version 
      try{ 
       req = new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch(e) { 
       return false; 
      } 
     } 
    } 
    if (!req) return false; 
    if (typeof success != 'function') success = function() {}; 
    if (typeof error!= 'function') error = function() {}; 
    req.onreadystatechange = function(){ 
     if(req.readyState == 4) { 
      return req.status === 200 ? 
       success(req.responseText) : error(req.status); 
     } 
    } 
    req.open("GET", url, true); 
    req.send(null); 
    return req; 
} 

आप स्वाभाविक रूप से सफलता + त्रुटि कार्यों में शामिल हैं की आवश्यकता होगी:

function dealWithResponse(textFromURL) 
{ 
    //textFromURL is whatever, say, a PHP you called in the URL would 'echo' 
} 


function ohNo() 
{ 
    //stuff like URL not found, etc. 
    alert("I/O error"); 
} 

और अब है कि आप उस के साथ सशस्त्र रहे हैं, यह कैसे आप वास्तविक कॉल समारोह के अंदर आप पर कहा जाता रचना है <a>:

function functionThatReallyCallsAjax() 
{ 
    //there are probably many scenarios but by having this extra function, 
    //you can perform any processing you might need before the call 

    doAjaxThing("serverFile.php",dealWithResponse,ohNo); 
} 

एक परिदृश्य हो सकता है जब आप PHP तुम से पहले नहीं था करने के लिए एक चर पारित करने के लिए की जरूरत है। इस मामले में, कॉल बन जाएगा:

doAjaxThing("serverFile.php?parameter1=dogsRock",dealWithResponse,ohNo); 

और अब न केवल आप PHP जे एस के लिए सामान भेजने के बाद, आप जे एस पीएचपी को भी भेज रहा है। Weeeee ...

अंतिम शब्द: AJAX एक भाषा नहीं है, यह एक जावास्क्रिप्ट 'चाल' है। आपको यह समझने की आवश्यकता नहीं है कि पहले 'doAjaxThing' फ़ंक्शन का उपयोग करने के लिए क्या किया जाता है, बस सुनिश्चित करें कि आप इसे ठीक से कॉल कर रहे हैं। एक बार सर्वर से प्रतिक्रिया मिलने पर यह स्वचालित रूप से 'सौदा WithResponse' फ़ंक्शन 'कॉल' करेगा। ध्यान दें कि जब तक प्रतिक्रिया आती है तब तक आप अपना व्यवसाय (एसिंक्रोनस - प्रक्रिया समय-बंधे नहीं) जारी रख सकते हैं - जो तब होता है जब 'डील विद रिस्पॉन्स' ट्रिगर हो जाता है -, पृष्ठ बंद होने और प्रतीक्षा (सिंक्रोनस-टाइम बंधे हुए) के विपरीत एक प्रतिक्रिया आता है। वह अजैक्स का जादू है (असिंक्रोनस जेवास्क्रिप्ट और एक्सएमएल)।

अपने मामले में आप गूंज ("सफलता") - या त्रुटि जोड़ना चाहते हैं! - PHP में, ताकि फ़ंक्शन 'dealWithResponse' जानता है कि उस जानकारी के आधार पर क्या करना है।

यह सब मुझे AJAX के बारे में पता है। उम्मीद है कि यह मदद करता है :)

संबंधित मुद्दे