Sử dụng AJAX để thực hiện một kịch bản PHP thông qua một hàm JavaScript

Question

Tôi có một liên kết anchor không có đích, nhưng nó có một onClick event:

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

Tôi hiểu rằng tôi có thể khối mã PHP không trực tiếp execure trong JavaScript do với bản chất của PHP và nó là ngôn ngữ phía máy chủ, vì vậy tôi phải sử dụng AJAX để làm như vậy.

Khi liên kết delete được nhấp, tôi cần nó để thực hiện truy vấn này (del_post.php)

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

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

?> 

Tôi đã cố gắng để hiểu AJAX sử dụng câu hỏi tương tự trong quá khứ, nhưng do là tương đối mới, Tôi hoàn toàn không thể hiểu được ngôn ngữ của nó. Dưới đây là những gì tôi đã thử:

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

Nhưng nhấp vào liên kết chỉ thay đổi URL thành http://localhost/.

Answer 1

Tôi tin rằng (chính) vấn đề là trống rỗng "href" thuộc tính của bạn. Hãy xóa điều đó hoặc đổi thành href="#" hoặc trường học cũ href="javascript:void()" (chỉ cần xóa nó, imo).

Nó được một lúc kể từ khi tôi sử dụng XMLHttpRequest và không phải cái gì như jQuery's .ajax, nhưng tôi nghĩ rằng bạn cần phải làm điều đó như vậy (chủ yếu là bạn cần phải .open/send trước khi bạn xem cho sự thay đổi trạng thái):

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

Bạn có thể vui lòng cung cấp tệp del_post.php của mình không? Thông thường bạn có thể hiển thị văn bản hoặc cảnh báo trong một

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

bằng cách sử dụng gọi lại trong một yêu cầu AJAX:

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

Phản ứng này đến từ file PHP của bạn ví dụ:

function remove_record(ARG){ 
    if ($condition==true) 
     echo "TRUE"; 
    else 
     echo "FALSE"; 
} 

Answer 3

Bạn nên xóa thuộc tính href khỏi thẻ neo và tạo kiểu cho phần tử bằng CSS.

Ngoài ra, kịch bản của bạn sẽ trông như thế này:

<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

Bạn đang cố thực hiện yêu cầu http bên trong cuộc gọi lại. Bạn chỉ cần di chuyển nó ra ngoài:

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

Loại bỏ các thuộc tính href sẽ ngăn chặn việc làm mới. Tôi tin rằng đó là hợp lệ trong HTML5.

Answer 5

Ok ... Tôi chỉ là một người đam mê, vì vậy hãy tha thứ cho tôi bất kỳ sự thiếu chính xác trong đánh máy nhưng công trình này: Một định dạng tôi sử dụng cho cuộc gọi ajax trong một yếu tố <a> là:

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

Vì vậy, rằng tôi có tính linh hoạt hơn (trong trường hợp tôi cần kiểm tra điều gì đó trước khi gửi ajax).Bây giờ, đối với một cuộc gọi ajax bạn cần:

1. tập tin gì để gọi
2. Phải làm gì với những phản hồi từ các tập tin mà bạn gọi là
3. Phải làm gì nếu một I/O lỗi xảy ra

Vì vậy, chúng tôi có chức năng này - không phải của tôi, leeched trong số hàng ngàn từ một nơi nào đó - có lẽ ở đây :) - và có lẽ nổi tiếng, lời xin lỗi của tôi cho tác giả, ông là một thiên tài: Đây là những gì bạn gọi cho điều ajax, nơi ' url 'là tệp bạn muốn' ajax ',' thành công 'là tên của hàm có liên quan đến kết quả và lỗi là tên của hàm xử lý lỗi 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; 
} 

Bạn sẽ tự nhiên cần phải bao gồm sự thành công + lỗi chức năng:

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

Và bây giờ mà bạn đang trang bị đó, đây là cách bạn soạn các cuộc gọi thực bên trong hàm bạn gọi tại số điện thoại <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); 
} 

Một trường hợp có thể là khi bạn cần chuyển biến số PHP bạn chưa có trước đây. Trong trường hợp này, cuộc gọi sẽ trở thành:

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

Và bây giờ không chỉ bạn gửi PHP cho JS, bạn cũng có JS gửi tới PHP. Weeeee ...

Từ cuối cùng: ajax không phải là ngôn ngữ, đó là một 'lừa' javascript. Bạn không cần phải hiểu đầy đủ về chức năng 'doAjaxThing' đầu tiên sử dụng, chỉ cần đảm bảo rằng bạn đang gọi nó đúng cách. Nó sẽ tự động 'gọi' hàm 'WithResponse' thỏa thuận khi phản hồi từ máy chủ đến. Lưu ý rằng bạn có thể tiếp tục thực hiện công việc của mình (không đồng bộ - quá trình không liên kết thời gian) cho đến khi phản hồi đến - đó là khi 'thỏa thuận WithResponse' được kích hoạt -, trái ngược với việc dừng trang và chờ (đồng bộ - thời gian gắn) cho đến một câu trả lời đến. Đó là sự kỳ diệu của ajax (Không đồng bộ JAvascript và Xml).

Trong trường hợp của bạn, bạn muốn thêm tiếng vang ("thành công") - hoặc lỗi! - trong PHP, để hàm 'dealWithResponse' biết phải làm gì dựa trên thông tin đó.

Đó là tất cả những gì tôi biết về ajax. Hy vọng điều này sẽ giúp :)