簡體   English   中英

更新PHP中的字符串而無需刷新頁面,AJAX類型的函數

[英]Update string in a PHP without page refresh, AJAX type function

我想看看是否有一種方法可以在PHP中執行類似的任務。 我使用javascript用另一個字符串更新“ boldStuff” ID中的字符串,在這種情況下,當單擊“提交”按鈕時,為用戶名。 重要的概念是,包含“ boldStuff”的頁面或部分會更新而不會刷新頁面。 基本上,我想在PHP中執行類似的功能,而不必每次有人單擊“提交”按鈕時刷新頁面。 任何幫助,將不勝感激。

<script type="text/javascript">

function displayMessage(firstName, lastName) {
document.getElementById('boldStuff').innerHTML = firstName + " " + lastName; //prints

}
</script>

<p>Welcome to my website, <b id='boldStuff'>dude</b> </p> 
</br>

<div id="hg">

<form>
First name:
<input type="input" name="yourName" /> </br>
First name:
<input type="input" name="yourLast" /> </br>
<input
type="button"
onclick="javascript:displayMessage(form.yourName.value, form.yourLast.value)"
value="Display Message" />
</form>
</div>
</body>
</html>

PHP在服務器上運行,而不在瀏覽器中運行。 它無法直接與瀏覽器中加載的頁面進行交互。 PHP可以生成一個頁面並將其發送到瀏覽器進行顯示,但這只是故事的結尾。 如果要在不重新加載的情況下操作頁面,則需要一種客戶端技術。 這意味着在99.9%的情況下使用Javascript。

如果您需要服務器上的某些東西,則可以使用Javascript來獲取PHP腳本的結果,然后將其插入頁面中而無需重新加載,但是即使PHP涉及到,所有客戶端操作都將由Javascript執行。

您的html文件應類似於:

<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
    $("form#submit").submit(function() {
    // we want to store the values from the form input box, then send via ajax below
    var fname     = $('#fname').attr('value');
    var lname     = $('#lname').attr('value');
    $.ajax({
            type: "POST",
            url: "ajax.php",
            data: "fname="+ fname +"&amp; lname="+ lname,
            success: function(){
                $('form#submit').hide(function(){$('div.success').fadeIn();});

            }
        });
    return false;
    });

});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255">
<title>Insert title here</title>
</head>
<body>
<form id="submit" method="post">
<fieldset><legend>Enter Information</legend> 
<label for="fname">Client First Name:</label>
 <input id="fname" class="text" type="text" name="fname" size="20" />
  <label for="lname">Client Last Name:</label> 
  <input id="lname" class="text" type="text" name="lname" size="20" /> 
  <button class="button positive">  Add Client </button>
  </fieldset>
</form>
<div class="success" style="display: none;">Client has been added.</div>
</body>
</html>

和ajax.php

<?php

    include ("../../inc/config.inc.php");

    // CLIENT INFORMATION
    $fname        = htmlspecialchars(trim($_POST['fname']));
    $lname        = htmlspecialchars(trim($_POST['lname']));

    $addClient  = "INSERT INTO clients (fname,lname) VALUES ('$fname','$lname')";
    mysql_query($addClient) or die(mysql_error());

?>

我從[在此處輸入鏈接說明] [1]復制了此代碼

[1]: http : //www.ryancoughlin.com/2008/11/04/use-jquery-to-submit-form/ ,我進行了測試。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM