包括使用jQuery和AJAX一個DIV內PHP文件

Question

我的問題是，我需要包括一個DIV裏面的PHP文件按鈕時無需重新加載頁面按下。

有一個在「的jsfiddle」文件甚至更多的解釋。

下面是一個包含文件的jsfiddle。

http://jsfiddle.net/jjygp/5/

感謝您的時間。我很樂意根據要求提供任何信息。

Answer 1

嘗試以下操作：

<button name="Change" id="Change">Change Div</button> 

你是一個ID指定點擊功能，但沒有ID設置按鈕。

Answer 2

見here for your updated jsfiddle

您已經打上Change名稱更改按鈕，但試圖與change的ID來選擇它。另外，你還沒有告訴jsfiddle包含jQuery。

Answer 3

你可以用load（）函數嘗試jQuery的

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

Answer 4

你不能在與AJAX PHP文件，而是在AJAX服務器端腳本，這是PHP的響應（其中有同樣的效果）。

載入中...

的JS文件（代碼）：

function ajaxalizeDiv() 
{ 
    $.ajax({ 
     type: "get", 
     url: "/path/to/the/php/you/want/to/include", 
     data: { 
      // Anything in json format you may want to include 
      id: myvarwithid, // descriptive example 
      action: "read" // descriptive example 
     }, 
     dataType: "json", 
     success: onAjax 
    }); 
} 

function onAjax(res) 
{ 
    if(!res || !res.text) 
     return; 

    $("#mydiv").html(res.text); 
} 

這裏而來的PHP文件：

<?php 
    $id = (int) @$_GET['id']; // same as in data part of ajax query request 
    $action = @$_GET['action']; // same as in data part of ajax query request 

    $text = '<a href="/index.php?id=' . $id . '&action=' . $action . '">click me</a>'; 

    // Note this is short example you may want to echo instead of die 
    // You may use not JSON, but raw text. However, JSON is more human-friendy (readable) 
    // and easy to maintain. 
    // Note also the array keys are used in the onAjax function form res (response). 
    die(json_encode(array('text' => $text /* and anything else you want */))); 
?> 

Answer 5

PHP是一種服務器端腳本語言，它將在JavaScript腳本執行之前執行。

因此，您不能使用​​執行PHP代碼，但是，您可以嘗試.ajax()向可以實現PHP代碼的服務器創建AJAX請求。

請參閱http://api.jquery.com/jQuery.ajax/如果你有使用.ajax()麻煩。

注意：在.ajax()方法中，存在一個名爲beforeSend的設置，該設置「可用於在發送之前修改jqXHR（在jQuery 1.4.x，XMLHTTPRequest中）」對象。希望這種方法以任何方式幫助你。

然後，你的JavaScript代碼將是這樣的：

$(document).ready(function(){ 
    $("#Change").click(function(){ 
    //doing AJAX request 
    $.ajax({ 
     url:"include/start10.php", 
     beforeSend:function(){ 
     $('#myDiv').fadeOut('slow'); 
     }, 
     success:function(data){ 
     // do something with the return data if you have 
     // the return data could be a plain-text, or HTML, or JSON, or JSONP, depends on your needs, if you do ha 

     $('#myDiv').fadeIn('slow'); 
     } 
    });  
    }); 
});