2013-07-31 50 views
6

Tôi mới sử dụng jQuery để xử lý AJAX và đã viết một kịch bản cơ bản để có được những điều cơ bản. Hiện tại tôi đang gửi một yêu cầu AJAX đến cùng một tệp và tôi muốn thực hiện một số xử lý bổ sung dựa trên kết quả của cuộc gọi AJAX đó.Gọi lại yêu cầu AJAX bằng cách sử dụng jQuery

Đây là mã của tôi:

**/*convertNum.php*/** 

$num = $_POST['json']; 
if (isset($num)) 
echo $num['number'] * 2; 
?> 

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<style type="text/css"> 
td {border:none;} 

</style> 
</head> 
<body> 

<table width="800" border="1"> 
<tr> 
<td align="center">Number To Send<br /><input type="text" id="numSend" size="40%" style="border:2px solid black;"></td> 
<td align="center">Number Returned<br /><input type="text" id="numReturn" size="40%" readonly></td> 
</tr> 

<tr><td align="center" colspan="4"><input type="button" value="Get Number" id="getNum" /></td></tr> 
</table> 



<script> 
$(document).ready(function() { 
$('#getNum').click(function() { 
var $numSent = $('#numSend').val(); 
var json = {"number":$numSent}; 

$.post("convertNum.php", {"json": json}).done(function (data) 
{ 
alert(data); 
} 
); 

}); 
}); 
</script> 
</body> 
</html> 

Dưới đây là câu trả lời tôi nhận được nếu tôi gửi số '2':

4 

<!DOCTYPE html> 

<html> 

<head> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<style type="text/css"> 

td {border:none;} 

</style> 

</head> 

<body> 



<table width="800" border="1"> 

<tr> 

<td align="center">Number To Send<br /><input type="text" id="numSend" size="40%" style="border:2px solid black;"></td> 

<td align="center">Number Returned<br /><input type="text" id="numReturn" size="40%" readonly></td> 

</tr> 

<tr><td align="center" colspan="4"><input type="button" value="Get Number" id="getNum" /></td></tr> 

</table> 

<script> 

$(document).ready(function() { 

$('#getNum').click(function() { 

var $numSent = $('#numSend').val(); 

var json = {"number":$numSent}; 

$.post("convertNum.php", {"json": json}).done(function (data) 

{ 

alert(data); 

} 

); 



}); 

}); 

</script> 
</body> 
</html> 

Rõ ràng tôi chỉ quan tâm trong việc tiếp nhận và sử dụng số '4', do đó câu hỏi của tôi: Cách tốt nhất để xác định chính xác dữ liệu nào tôi muốn được trả về?

Vài suy nghĩ tôi đã có:

  • gói tất cả HTML của tôi bên trong một câu lệnh if (ví dụ, nếu $ num isset, làm html KHÔNG đầu ra; khác đầu ra HTML) nhưng sau đó tôi đang vang vọng HTML và tôi không muốn làm điều đó.
  • Thiết lập một tập lệnh PHP riêng để nhận cuộc gọi AJAX của tôi: Đó là những gì tôi đã làm lúc đầu và nó hoạt động tốt. Tuy nhiên, tôi quan tâm đến việc giữ mọi thứ bên trong một tệp và muốn khám phá những cách có thể làm như vậy.

Tôi chắc chắn có một cách thanh lịch để thực hiện việc này. Cảm ơn mọi lời đề nghị!

+0

lý do tại sao bạn muốn giữ mọi thứ trong một tập tin. Bạn nên cấu trúc mã của bạn. Nếu không, bạn sẽ nhận được các tệp rất lage với mã khó hiểu. Và những gì về css và javascript? Bạn có muốn có tất cả trong một tập tin không? Bạn có thể làm điều đó nhưng tôi nghĩ rằng điều này sẽ không được thanh lịch. – steven

+0

Steven - đủ công bằng. Tôi muốn khám phá việc giữ tất cả các cuộc gọi trong một tệp là vì tôi đang làm việc trên một dự án nơi chúng tôi sẽ có nhiều trang php thực hiện cuộc gọi AJAX và tôi đang cố gắng xác định các phương pháp hay nhất để xử lý trường hợp này. Bây giờ, tôi sẽ nói rằng mỗi tập lệnh sử dụng cuộc gọi AJAX như thế này sẽ có tệp .inc tương ứng. Có lẽ tốt nhất là thực hiện cuộc gọi POST đến tệp đó, thay vì sử dụng cùng một trang hoặc một trang khác kịch bản. Tôi đang trong giai đoạn phát triển khám phá ngay bây giờ và câu trả lời tôi nhận được rất hữu ích. – JRizz

Trả lời

7

Cách thanh lịch sẽ là có tệp PHP riêng biệt (!) Sẽ chỉ xuất ra phần number times 2 của PHP hiện tại của bạn. Sau đó, bạn tạo ra một yêu cầu AJAX từ PHP hiện tại của bạn đến PHP riêng biệt mới.

+0

Hi devnull, Đó là cách tiếp cận ban đầu của tôi. Tôi cần chỉnh sửa câu trả lời của mình để bao gồm điều đó - cảm ơn bạn. Tôi đã thực hiện cuộc gọi AJAX trỏ đến tập lệnh PHP riêng biệt, nhưng tôi muốn khám phá ý tưởng giữ tất cả trên một trang. – JRizz

+1

Sau đó, bạn nên truy cập 'if' ... bạn không cần phải lặp lại HTML, bạn vẫn có thể có phần HTML bên ngoài các phần . Điều này cũng sẽ làm việc bên trong PHP nếu các câu lệnh! – devnull69

+0

Thú vị - Tôi đã không xem xét điều đó. Hãy để tôi chơi với kịch bản của tôi một số chi tiết và khám phá điều đó. Cảm ơn bạn - Tôi muốn để điều này mở để có được những ý tưởng khác để xem xét, nhưng nếu đây là giải pháp tốt nhất, tôi sẽ đánh dấu câu trả lời này. Tôi đánh giá cao ý kiến ​​của bạn. – JRizz

1

LƯU Ý * Cách tiếp cận tốt hơn là giữ những thứ như thế này trong một tệp riêng biệt, giúp đọc và dễ hiểu hơn, đặc biệt nếu bạn sử dụng chuyển đổi đặt tên tốt.

Đó là một cách tiếp cận thủ tục xấu nhưng ở đây tôi đi :):

<?php 
$num = $_POST['json']; 
if (isset($num)) 
echo ($num['number'] * 2); 
die(); 
?> 

hoặc tốt hơn nào:

<?php 
$num = $_POST['json']; 
if (isset($num)) 
die($num['number'] * 2); //In case of error you could put them in brackets 
?> 

PS Như thay thế cho die(); bạn có thể sử dụng exit();, cả hai đều làm khá giống nhau: chấm dứt thực hiện tiếp theo

+1

ngoặc trong phương pháp tiếp cận đầu tiên? 1 cho số thứ hai – steven

+0

Cảm ơn lỗi đánh máy :) không thấy rằng –

+0

Cảm ơn Ghostman. Đó là cách tiếp cận ban đầu của tôi - tôi đã thực hiện các chỉnh sửa cho câu hỏi của mình để chỉ rõ điều đó. Nó hoạt động rất tốt, nhưng tôi muốn khám phá ý tưởng sử dụng cùng một trang để nhận cuộc gọi AJAX. Có vẻ như đó vẫn là cách hiệu quả nhất để đi. Cảm ơn! – JRizz

1

Bạn có thể thêm die(); sau khi bạn lặp lại số nếu bạn thực sự muốn giữ nó trên cùng một trang. Điều này sẽ chấm dứt việc thực thi kịch bản. Đừng quên thêm dấu ngoặc xung quanh câu lệnh if:

if (isset($num)) { 
    echo $num['number'] * 2; 
    die(); 
} 

Đó không phải là giải pháp thanh lịch nhất.

+0

DaGhostman Dimitrov đánh tôi với nó. – Valk6

0

Tôi không biết hiệu quả như thế nào đây là nhưng bạn có thể làm điều gì đó như:

<?php 
/*convertNum.php*/ 
$num = isset($_POST['json']) ? $_POST['json'] : NULL; //you have errors in this line 
if (!is_null($num)){ 
    echo $num['number'] * 2; 
    exit(); //exit from script 
} 
?> 
2

Tôi tin this post trả lời một khía cạnh của những gì bạn đang nhìn thấy - là sự bắt chước toàn bộ trang trong hộp cảnh báo của bạn.

Tiếp theo, đây là một số bài tốt để có được những điều cơ bản của AJAX:

A simple example

More complicated example

Populate dropdown 2 based on selection in dropdown 1

+0

Cảm ơn bạn. Luôn luôn tốt để có thêm tài liệu đọc và ví dụ. Tôi đánh giá cao thời gian của bạn. – JRizz

Các vấn đề liên quan