發佈到PHP，不要重新加載頁面並更新div

編輯：現在可以使用，代碼已更新。非常感謝Martin Amps！發佈到PHP，不要重新加載頁面並更新div

所以我一直玩這個已經有一個星期了，並且一起入侵了很多例子，但是它沒有工作，所以我不會打擾發佈代碼，因爲它是一團糟！我是所有行業的傑出人物，無所不能，所以我不確定我要出錯的地方。

這是我需要的。

posttest.php

<html> 
<head> 
<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script> 
</head> 
<body> 

<form name="processForm" id="processForm" action="process.php" method="POST"> 
    <input type="text" id="textField" name="textField" /> 
    <input type="hidden" id="sessionID" name="sessionID" value="myusername" /> 
<input type="submit" value="Process!" /> 
</form> 

<div id="mydiv"></div> 

FILLER<BR><BR>FILLER<BR><BR>FILLER<BR><BR>FILLER<BR><BR>FILLER<BR><BR>FILLER<BR><BR>FILLER<BR><BR>FILLER<BR><BR>FILLER<BR><BR>FILLER<BR><BR> 
FILLER<BR><BR>FILLER<BR><BR>FILLER<BR><BR>FILLER<BR><BR>FILLER<BR><BR>FILLER<BR><BR>FILLER<BR><BR>FILLER<BR><BR>FILLER<BR><BR>FILLER<BR><BR> 

<script type="text/javascript"> 

$('#processForm').submit(function() { 
    var text = $('#textField').val(); 
    var sid = $('#sessionID').val(); 

$.ajax({ 
    url: "process.php", 
    type: "POST", 
    data: { 'text' : text, 'sessionID' : sid }, 
    success: function(data) { 
    var result = $.parseJSON(data); 
    if (result.success) {   
     // Handle your result and update your form accordingly 
     // result.data.someKey 
     $('#mydiv').text('Success! With ' + result.data); 

    } 
    else { 
     // Error handling as applicable 
    } 
    } 
}); 

    return false; 
}); 

</script> 

</body> 
</html>

process.php

<?php 
$someText=$_POST['text']; 

$return = array('success' => false, 
      'data' => $someText 
      ); 

if (isset($_POST['text'], $_POST['sessionID'])) { 
    // Do your queries 

    $return['success'] = true; 
    //$return['data'] = array('someKey' => 'someValue'); 
    $return['data'] = $someText; 
} 

echo json_encode($return); 
?>

我試過這樣的例子很多，並試圖使自己從無到有，似乎無法得到它的工作！我試圖完成的一個例子就像在Facebook上添加評論或者發佈新帖子時一樣。

我希望有人能幫忙，因爲我覺得我已經在這個簡單的任務上浪費了一週的時間。

在此先感謝！

來源

2012-07-14 Dorian

所以你想要根據輸入框中的文本實時更新index.php中的顯示div？ – lusketeer 2012-07-14 23:41:19

有一個非常簡單的方法，但我不能說這是最好的方法，把php頁面中的帖子放入一個iframe中，然後從sql中的變量更新div – 2012-07-14 23:49:00

歡迎來到StackOverflow！請在發佈之前搜索您的問題，因爲有許多問題已經在這裏得到解答，其中一些我自己回答：http://stackoverflow.com/search?q=jquery+send+data+to+php&submit=search – 2012-07-14 23:54:46

您不需要將會話變量存儲在頁面中，因爲它已存儲在cookie中。您正在使用JQuery的假設，這裏有一個快速的示例：

的標記

<form id="processForm" action="process.php" method="POST"> 
    <input type="text" id="textField" name="textField" /> 
    <input type="hidden" id="sessionID" name="sessionID" value="<?=session_id()?>" /> 
    <input type="submit" value="Process!" /> 
</form>

JavaScript的

$('#processForm').submit(function() { 
    var text = $('#textField').val(); 
    var sid = $('#sessionID').val(); 

    $.ajax({ 
    url: "process.php", 
    type: "POST", 
    data: { 'text' : text, 'sessionID' : sid }, 
    success: function(data) { 
     var result = $.parseJSON(data); 
     if (result.success) {   
      // Handle your result and update your form accordingly 
      // result.data.someKey 
     } 
     else { 
      // Error handling as applicable 
     } 
    } 
    }); 

    return false; 
});

process.php

<?php 

$return = array('success' => false, 
       'data' => array() 
       ); 

if (isset($_POST['text'], $_POST['sessionID'])) { 
    // Do your queries 

    $return['success'] = true; 
    $return['data'] = array('someKey' => 'someValue'); 
} 

echo json_encode($return); 
?>

注意

你應該使用絕對的URL，並意識到形式/ JavaScript是不突兀，所以你應該讓功能沒有Ajax了。

來源

2012-07-14 23:50:37 Martin

這幾乎是我需要的一切...我可以做這個發佈沒有問題，它將數據返回到一個令我感到困擾的div。無需重新加載/刷新index.php頁面。基本上，我現在正在做這個評論。輸入一條評論，點擊按鈕，然後div將得到我的評論更新（並且後臺工作完成後將其添加到數據庫並格式化等等）。 – Dorian 2012-07-15 00:07:23

所以在你的成功函數中，假設你在標記中有'

'，只需執行'$（'＃yourDiv'）.text（result.data.someKey）;' – Martin 2012-07-15 00:10:34

嗯。好吧，但由於某種原因，即使您發佈的提交功能返回false，它仍然加載process.php，並顯示我的process.php原始文本回聲... – Dorian 2012-07-15 00:16:55

你可以只使用一般的AJAX請求，然後改變div的響應？

當然這是使用JQuery。

$.ajax({ 
        type: "POST", 
        url: "/process.php",  
        data: "yourData=AwesomeData&SomeOtherData=5", 
        success: function(data){ 
         //Update the div 
        }, 
        error: function(request){ 
         //Something went wrong. 
        }, 
       });

來源

2012-07-14 23:42:43 MrB

對，將我的數據發佈到process.php，但之後我需要從process.php返回的東西，然後加載到div中。 – Dorian 2012-07-15 00:13:09

我假設你只是想通過ajax從process.php加載一些數據。你可以使用jQuery的load()方法。 http://api.jquery.com/load/

在您的索引中。PHP文件：

$('#container').load('process.php', {'variable1' : var1, 'variable2' : var2});

上面的代碼用於使用所述POST請求通過AJAX提交數據。所以你必須訪問他們在process.php文件使用$_POST['variable1']然後只是執行你的查詢，我假設你已經如何做到這一點，所以我沒有提供一個例子。如果它是一個多行的結果，你需要將結果存儲在一個數組：

$store = array(); 
foreach($result as $row){ 
    $store[] = array('field1'=>$row['field_name']); 
}

最後使用json_encode使陣列更容易在JavaScript處理：

echo json_encode($store);

如果您需要更多的幫助隨時發表評論。

來源

2012-07-14 23:55:09

是的，我想從process.php加載數據，但它的數據首先發送到process.php，處理，存儲在數據庫中，重新格式化，然後返回以動態加載到div中。像這個評論框一樣。 – Dorian 2012-07-15 00:11:36

下面是一個web表單的示例來收集用戶數據：

<form class="form"> 
<input class="name" type="text"/> 
<input class="email" type="text"/> 

<button class="submit">Send Data</button> 
</form>

這裏是jQuery的：

$('form button.submit').click(function() { 
    $.ajax({ 
     'data' : $('form').serialize(), 
     'type' : 'POST', 
     'url' : 'process.php', 
     'success' : function(data) { 
      $('div.container').html('<p>' + data + '</p>'); 
     } 
    }); 
});

這裏是PHP：

<?php 
    if (isset($_POST['name']) && isset($_POST['email']) && $_POST['name'] != "" && $_POST['email'] != "") { 
    //Do some SQL processing 

     echo "success"; 
     exit; 
    } 

?>

希望有所幫助！

來源

2012-07-15 00:12:59

'$ .ajax'數組鍵不應該被引用，對嗎？ – Abdulaziz 2012-07-15 00:29:51

@AzizAG它可以同時使用。 ;） – 2012-07-16 15:00:50

發佈到PHP，不要重新加載頁面並更新div

回答

相關問題