Hướng dẫn call php function in jquery - gọi hàm php trong jquery

Tôi có một chức năng PHP trên trang web của mình, mất vài giây để hoàn thành. Điều này giữ toàn bộ trang mà tôi không muốn.

Có thể với jQuery để gọi chức năng PHP này sau khi trang đã tải và hiển thị kết quả trong một div? Ngoài ra để hiển thị hình ảnh AJAX Loader cho đến khi chức năng PHP hoàn thành?

Tôi đã nhìn vào jQuery.post nhưng dường như không thể làm cho nó hoạt động.

Ai đó có thể giúp đỡ không?

Cảm ơn bạn

Hỏi ngày 23 tháng 8 năm 2010 lúc 15:01Aug 23, 2010 at 15:01

1

Ajax làm phép thuật:

$(document).ready(function(

    $.ajax({ url: 'script.php?argument=value&foo=bar' });

));

Đã trả lời ngày 23 tháng 8 năm 2010 lúc 15:09Aug 23, 2010 at 15:09

OtarotarOtar

2.5511 Huy hiệu vàng20 Huy hiệu bạc24 Huy hiệu đồng1 gold badge20 silver badges24 bronze badges

Cảm ơn tất cả. Tôi đã lấy một chút của mỗi giải pháp của bạn và tự làm.

Giải pháp làm việc cuối cùng là:

<script type="text/javascript">
    $(document).ready(function(){
        $.ajax({
            url: '<?php bloginfo('template_url'); ?>/functions/twitter.php',
            data: "tweets=<?php echo $ct_tweets; ?>&account=<?php echo $ct_twitter; ?>",
            success: function(data) {
                $('#twitter-loader').remove();
                $('#twitter-container').html(data);
            }
        });
   });
</script>

Đã trả lời ngày 25 tháng 8 năm 2010 lúc 13:57Aug 25, 2010 at 13:57

BriganebriganteBrigante

1.8616 huy hiệu vàng23 Huy hiệu bạc32 Huy hiệu đồng6 gold badges23 silver badges32 bronze badges

Vâng, điều này chắc chắn là có thể. Bạn sẽ cần phải có chức năng PHP trong một tệp PHP riêng biệt. Đây là một ví dụ sử dụng $ .Post:

$.post( 
    'yourphpscript.php', // location of your php script
    { name: "bob", user_id: 1234 }, // any data you want to send to the script
    function( data ){  // a function to deal with the returned information

        $( 'body ').append( data );

    });

Và sau đó, trong tập lệnh PHP của bạn, chỉ lặp lại HTML bạn muốn. Đây là một ví dụ đơn giản, nhưng là một nơi tốt để bắt đầu:

<?php
    echo '<div id="test">Hello, World!</div>';
?>

Đã trả lời ngày 23 tháng 8 năm 2010 lúc 15:05Aug 23, 2010 at 15:05

Hookedonwinterhookedonwinterhookedonwinter

12.3k18 Huy hiệu vàng59 Huy hiệu bạc74 Huy hiệu đồng18 gold badges59 silver badges74 bronze badges

1

Đây chính xác là những gì Ajax dành cho. Xem ở đây:

http://api.jquery.com/load/

Về cơ bản, bạn ajax/test.php và đặt mã HTML được trả lại cho phần tử có ID kết quả.

$('#result').load('ajax/test.php');

Tất nhiên, bạn sẽ cần đặt chức năng cần có thời gian cho một tệp PHP mới (hoặc gọi cái cũ có tham số GET sẽ chỉ kích hoạt chức năng đó).

Đã trả lời ngày 23 tháng 8 năm 2010 lúc 15:04Aug 23, 2010 at 15:04

PalantirpalantirPalantir

23.4K9 Huy hiệu vàng75 Huy hiệu bạc85 Huy hiệu Đồng9 gold badges75 silver badges85 bronze badges

PHP đi kèm với nhiều chức năng tích hợp hơn để hoạt động với các chuỗi, mảng và các loại dữ liệu khác so với JavaScript. Do đó, việc rất nhiều người cảm thấy muốn gọi các chức năng PHP từ JavaScript là điều tự nhiên. Tuy nhiên, như bạn có thể đoán hoặc phát hiện ra, điều này không hoạt động như mong đợi.

Có thể có rất nhiều trường hợp khác mà bạn có thể muốn chạy một số mã PHP bên trong JavaScript, ví dụ, để lưu một số dữ liệu trên máy chủ của bạn. Chỉ cần đặt mã PHP bên trong JavaScript cũng sẽ không hoạt động trong trường hợp này.

Lý do bạn không thể gọi một hàm PHP từ JavaScript phải làm với thứ tự mà các ngôn ngữ này được chạy. PHP là ngôn ngữ phía máy chủ và JavaScript chủ yếu là ngôn ngữ phía máy khách.

Bất cứ khi nào bạn muốn truy cập một trang, trình duyệt sẽ gửi yêu cầu đến máy chủ, sau đó xử lý yêu cầu và tạo một số đầu ra bằng cách chạy mã PHP. Trang web đầu ra hoặc được tạo sau đó được gửi lại cho bạn. Trình duyệt thường mong đợi trang web bao gồm HTML, CSS và JavaScript. Bất kỳ PHP nào mà bạn có thể đã đặt hoặc lặp lại bên trong JavaScript sẽ chạy đã chạy hoặc sẽ không chạy hoàn toàn khi trang web tải trong trình duyệt.

Tất cả hy vọng không bị mất, mặc dù. Trong hướng dẫn này, tôi sẽ giải thích cách bạn có thể gọi các chức năng PHP từ các hàm JavaScript và JavaScript từ PHP.

Gọi chức năng PHP từ JavaScript

Chúng ta có thể sử dụng AJAX để gọi chức năng PHP trên dữ liệu được tạo bên trong trình duyệt. AJAX được sử dụng bởi rất nhiều trang web để cập nhật các phần của trang web mà không tải lại trang đầy đủ. Nó có thể cải thiện đáng kể trải nghiệm người dùng khi được thực hiện đúng.

Hãy nhớ rằng mã PHP vẫn sẽ chạy trên chính máy chủ. Chúng tôi sẽ chỉ cung cấp cho nó dữ liệu từ trong tập lệnh của chúng tôi.

Sử dụng JQuery Ajax để chạy mã PHP

Nếu bạn đang sử dụng jQuery trên trang web của mình, việc gọi bất kỳ tệp PHP nào có mã mà bạn muốn chạy trở nên dễ dàng.

Bạn có thể chuyển một hoặc hai tham số cho hàm ajax(). Khi hai tham số được truyền, cái đầu tiên sẽ là URL của trang web nơi trình duyệt sẽ gửi yêu cầu của bạn. Khi bạn chỉ chuyển một tham số cho ajax(), URL sẽ được chỉ định trong cấu hình.

Tham số thứ hai chứa một loạt các tùy chọn cấu hình khác nhau để chỉ định dữ liệu bạn dự định xử lý và phải làm gì trong trường hợp thành công hoặc thất bại, v.v. Các tùy chọn cấu hình được truyền ở định dạng JSON.

Bạn có thể sử dụng tham số

<script type="text/javascript">
    $(document).ready(function(){
        $.ajax({
            url: '<?php bloginfo('template_url'); ?>/functions/twitter.php',
            data: "tweets=<?php echo $ct_tweets; ?>&account=<?php echo $ct_twitter; ?>",
            success: function(data) {
                $('#twitter-loader').remove();
                $('#twitter-container').html(data);
            }
        });
   });
</script>

<script type="text/javascript">
    $(document).ready(function(){
        $.ajax({
            url: '<?php bloginfo('template_url'); ?>/functions/twitter.php',
            data: "tweets=<?php echo $ct_tweets; ?>&account=<?php echo $ct_twitter; ?>",
            success: function(data) {
                $('#twitter-loader').remove();
                $('#twitter-container').html(data);
            }
        });
   });
</script>

Bây giờ, chúng ta hãy xem một ví dụ về yêu cầu AJAX cơ bản nơi chúng ta sẽ chuyển dữ liệu đến tệp PHP và gọi chức năng PHP

<script type="text/javascript">
    $(document).ready(function(){
        $.ajax({
            url: '<?php bloginfo('template_url'); ?>/functions/twitter.php',
            data: "tweets=<?php echo $ct_tweets; ?>&account=<?php echo $ct_twitter; ?>",
            success: function(data) {
                $('#twitter-loader').remove();
                $('#twitter-container').html(data);
            }
        });
   });
</script>

<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>PHP Function in JavaScript Demo</title>
<style>
body {
    font-family: 'Lato';
    font-weight: 400;
    font-size: 1.4rem;
}

p {
    text-align: center;
	margin-bottom: 4rem;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p class="unbroken">The United States (U.S. or US)—officially the United States of America (USA), commonly known as America—is a country primarily located in North America, consisting of 50 states, a federal district, five major self-governing territories, 326 reservations, and various possessions. At 3.8 million square miles (9.8 million square kilometers), it is the world's third- or fourth-largest country by total area. With a population of more than 328 million people, it is the third most populous country in the world. The national capital is Washington, D.C., and the most populous city is New York City.</p>
<p class="broken"></p>
<script>
$.ajax({
  method: "POST",
  url: "wrap.php",
  data: { text: $("p.unbroken").text() }
})
  .done(function( response ) {
    $("p.broken").html(response);
  });
</script>
</body>
</html>

Đặt mã sau trong một tệp có tên Wrap.php trong cùng một thư mục.wrap.php in the same directory.

<?php
$text = $_POST['text'];
$output = wordwrap($text, 60, "<br>");
echo $output;
?>

Hãy nhớ rằng bạn phải

<script type="text/javascript">
    $(document).ready(function(){
        $.ajax({
            url: '<?php bloginfo('template_url'); ?>/functions/twitter.php',
            data: "tweets=<?php echo $ct_tweets; ?>&account=<?php echo $ct_twitter; ?>",
            success: function(data) {
                $('#twitter-loader').remove();
                $('#twitter-container').html(data);
            }
        });
   });
</script>

Sử dụng API tìm nạp để chạy mã PHP

Bạn cũng có thể sử dụng API tìm nạp để chạy mã PHP trên dữ liệu được thu thập bên trong trình duyệt bằng cách gửi yêu cầu POST đến máy chủ. Trong ví dụ trước, chúng tôi có thể thay thế mã AJAX bằng JavaScript sau để có kết quả tương tự.

fetch('wrap.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    },
    body: "text=" + document.querySelector("p.unbroken").innerText
  })
  .then(response => response.text())
  .then(data => document.querySelector("p.broken").innerHTML = data);

Giống như trong ví dụ AJAX, chúng tôi chỉ định URL và cung cấp thông tin tiêu đề bổ sung rằng chúng tôi sẽ gửi dữ liệu của chúng tôi ở dạng được mã hóa URL. Điều này cho phép chúng tôi sử dụng

<script type="text/javascript">
    $(document).ready(function(){
        $.ajax({
            url: '<?php bloginfo('template_url'); ?>/functions/twitter.php',
            data: "tweets=<?php echo $ct_tweets; ?>&account=<?php echo $ct_twitter; ?>",
            success: function(data) {
                $('#twitter-loader').remove();
                $('#twitter-container').html(data);
            }
        });
   });
</script>

Gọi chức năng JavaScript từ PHP

Như bạn đã biết bây giờ, PHP sẽ chạy trước JavaScript khi bạn yêu cầu một trang web từ một số máy chủ. Chúng tôi cũng có thể xuất bất cứ thứ gì chúng tôi muốn hiển thị trên trang web bằng cách sử dụng

<script type="text/javascript">
    $(document).ready(function(){
        $.ajax({
            url: '<?php bloginfo('template_url'); ?>/functions/twitter.php',
            data: "tweets=<?php echo $ct_tweets; ?>&account=<?php echo $ct_twitter; ?>",
            success: function(data) {
                $('#twitter-loader').remove();
                $('#twitter-container').html(data);
            }
        });
   });
</script>

<script type="text/javascript">
    $(document).ready(function(){
        $.ajax({
            url: '<?php bloginfo('template_url'); ?>/functions/twitter.php',
            data: "tweets=<?php echo $ct_tweets; ?>&account=<?php echo $ct_twitter; ?>",
            success: function(data) {
                $('#twitter-loader').remove();
                $('#twitter-container').html(data);
            }
        });
   });
</script>

Dưới đây là một số mã ví dụ sẽ kiểm tra một loạt các chuỗi để tìm chỉ số của palindrom cuối cùng. Chỉ số này được lưu trữ trong một biến PHP, sau đó được chuyển đến JavaScript được viết bên trong thẻ

<script type="text/javascript">
    $(document).ready(function(){
        $.ajax({
            url: '<?php bloginfo('template_url'); ?>/functions/twitter.php',
            data: "tweets=<?php echo $ct_tweets; ?>&account=<?php echo $ct_twitter; ?>",
            success: function(data) {
                $('#twitter-loader').remove();
                $('#twitter-container').html(data);
            }
        });
   });
</script>

<script type="text/javascript">
    $(document).ready(function(){
        $.ajax({
            url: '<?php bloginfo('template_url'); ?>/functions/twitter.php',
            data: "tweets=<?php echo $ct_tweets; ?>&account=<?php echo $ct_twitter; ?>",
            success: function(data) {
                $('#twitter-loader').remove();
                $('#twitter-container').html(data);
            }
        });
   });
</script>

<?php

$words = ['apple', 'radar', 'mango', 'civic', 'banana'];

$pal_index = 0;
$last_pal = 0;
foreach($words as $word) {
  if($word == strrev($word)) {
    $last_pal = $pal_index;
  }
  echo '<p>'.ucfirst($word).'</p>';
  $pal_index += 1;
}
?>
<script>
<?php
echo 'let p_el = document.querySelectorAll("p")['.$last_pal.']';
?>
let red = Math.round(p_el.getBoundingClientRect().top)%256;
let green = Math.round(p_el.getBoundingClientRect().right)%256;
p_el.style.color =  "rgb(" + red + ", " + green + ", 0)";
</script>

Ví dụ trên cho thấy cách bạn có thể chuyển dữ liệu từ PHP sang JavaScript bằng cách đơn giản lặp lại nó. Chỉ cần đảm bảo rằng mã bạn lặp lại là JavaScript hợp lệ.

Sự kết luận

Chúng ta đều biết rằng PHP chạy trên máy chủ và JavaScript thường chạy trong trình duyệt. Vì cả hai thực thi vào các thời điểm khác nhau, bạn không thể gọi các hàm từ ngôn ngữ này trong một ngôn ngữ khác và mong đợi mã hoạt động. Tuy nhiên, có nhiều cách để giải quyết vấn đề đó, cho phép trao đổi thông tin giữa PHP và JavaScript.

Để tóm tắt, bạn có thể sử dụng AJAX khi bạn muốn gọi hàm PHP từ JavaScript hoặc chạy mã PHP trên một số dữ liệu được tạo bên trong trình duyệt. Bạn có thể sử dụng Echo trong PHP để xuất mã JavaScript sẽ chạy sau trong trình duyệt của máy khách. Nếu bạn có bất kỳ câu hỏi về bài viết, xin vui lòng cho tôi biết trong các ý kiến.

Tìm hiểu PHP với một khóa học trực tuyến miễn phí

Nếu bạn muốn học PHP, hãy xem khóa học trực tuyến miễn phí của chúng tôi về các nguyên tắc cơ bản của PHP!

Trong khóa học này, bạn sẽ tìm hiểu các nguyên tắc cơ bản của lập trình PHP. Bạn sẽ bắt đầu với những điều cơ bản, tìm hiểu cách PHP hoạt động và viết các vòng và chức năng PHP đơn giản. Sau đó, bạn sẽ xây dựng thành các lớp mã hóa cho lập trình hướng đối tượng đơn giản (OOP). Trên đường đi, bạn sẽ tìm hiểu tất cả các kỹ năng quan trọng nhất để viết ứng dụng cho web: bạn sẽ có cơ hội thực hành trả lời để nhận và đăng yêu cầu, phân tích cú pháp JSON, xác thực người dùng và sử dụng cơ sở dữ liệu MySQL.

Bạn có thấy bài đăng này hữu ích?

Freelancer, người hướng dẫn

Tôi là một nhà phát triển đầy đủ, người cũng thích viết các hướng dẫn. Sau khi thử một loạt những điều cho đến năm thứ hai của đại học, tôi quyết định làm việc về các kỹ năng phát triển web của mình. Bắt đầu chỉ với HTML và CSS, tôi tiếp tục tiến về phía trước và có được kinh nghiệm trong PHP, JavaScript và Python. Tôi thường dành thời gian rảnh của mình hoặc làm việc cho một số dự án phụ hoặc đi du lịch xung quanh.

Tôi có thể gọi chức năng PHP từ jQuery không?

JavaScript có thể gọi chức năng PHP không?

AJAX có thể gọi chức năng PHP không?

Làm thế nào để bạn gọi chức năng PHP khi nhấp vào nút?