使用AJAX，通過JavaScript函數

Question

我有沒有目標錨鏈接來執行PHP腳本，但它確實有一個onClick event：

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

我知道我可以在適當的JavaScript不能直接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(); 
     } 
     }  
} 

但是點擊鏈接只是改變的URL http://localhost/。

Answer 1

我相信（主），問題是你的空 「href」 屬性。刪除，或將其更改爲href="#"或舊學校href="javascript:void()"（只是刪除它，IMO）。

它已經，因爲我用的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(); 
} 

Answer 2

你能否提供你的：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"; 
} 

Answer 3

通常情況下，你可以通過在一個AJAX請求使用回調顯示了在

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

短信或警報

您應該從錨點標記中移除href屬性，並使用CSS對元素進行樣式設置。

另外，你的腳本應該是這樣的：

<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> 

Answer 4

您正試圖在回調中創建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屬性將防止刷新。我相信這在HTML5中是有效的。

Answer 5

好吧......我只是一個業餘愛好者，所以請原諒我在打字的任何錯誤，但這個工程：我用在<a>元素的AJAX調用格式爲：

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

所以我有更多的靈活性（以防在發送ajax之前需要檢查某些內容）。現在，Ajax調用，您需要：

1. 什麼文件來調用
2. 什麼與你叫
3. 如果一個I/O錯誤發生

怎麼辦的文件中做

所以我們有這個功能 - 不是我的，在幾千人之間從某處吮吸 - 可能在這裏:) - 也許是衆所周知的，我向作者道歉，他是一個天才：這就是你要求的ajax事物， url'是你想要'ajax'的文件，'success'是處理結果的函數的名稱，錯誤是處理IO錯誤的函數的名稱。

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>：當你需要一個變量傳遞給您以前是沒有的PHP

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); 
} 

一種情況可能是。在這種情況下，呼叫會變成：

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

現在不光你有PHP發送的東西JS，你有JS發送到PHP了。 Weeeee ...

最後的話：ajax不是一種語言，它是一個JavaScript'技巧'。你不需要完全理解第一個'doAjaxThing'函數是如何使用它的，只要確保你正確地調用它。一旦服務器的響應到達，它將自動'調用''處理WithResponse'函數。注意，你可以繼續做你的業務（異步 - 過程不是時間綁定的），直到響應到達 - 這就是'處理響應'被觸發時 - 而不是停止頁面並等待（同步 - 時間綁定），直到一個響應到達。這是ajax的魔力（異步JAvascript和Xml）。

在你的情況下，你想添加回聲（「成功」） - 或錯誤！ - 在PHP中，以便函數'dealWithResponse'根據該信息知道該怎麼做。

這就是我所知道的關於ajax的一切。希望這有助於:)