如何用AJAX根PHP傳遞素質

我想做一個可以不用重新頁面就能傳遞素質的程式

構想大概如下

姓名:

輸入後按下送出

會將姓名傳遞到資料庫中

然後會在欄位下方出現剛剛所打的姓名

而這個動作不用重新整理頁面

請問我該怎麼做??

Update:

如果要用POST傳送那該怎麼做呢??因為我不太希望使用者看到內容

Update 2:

我發現他好像不能顯示中文ㄟ@@幫幫忙...

Update 3:

還有我有點不太清楚您的innerHTML的意思@@?那是說只載入一段的文件近來ㄇ??

3 Answers

Rating
  • Sam
    Lv 6
    1 decade ago
    Favorite Answer

    AJAX(動態資料交換處理技術BY xmlrequest)我不會!(我不是來亂的啦。)

    但是我會的技術叫AJAI(動態資料交換處理技術 by iframe)

    首先,你要先設一個隱藏的iframe(一般是放在</body>的前一行如下:

    <iframe name="_loaddata" style="'DISPLAY:none"></iframe>

    再來在你表單的姓名欄位的下一行加上這一行:

    <div id="getname"></div>

    把你的form那一行的最後加上target="_loaddata"如下

    <form method="post" action="xxxxx.php" target="_loaddata">

    上面是屬於你html設計的部份。

    再來就是xxxxx.php的部份如下:

    ------------------------------------------------------------------------------

    <?php

    $name = $_POST["name"];

    再來經過一段資料庫處理程式

    ?>

    <script>

    parent.getname.innerText = "<?=$name ?>";

    </script>

    ------------------------------------------------------------------------------

    這樣就完成AJAI的資料傳遞了。原理如下:

    我們定義了一個隱藏的iframe,他的作用是用來接收表單順便處理資料庫存

    入的動作。

    而我們定義的空白內容的div,他的目的是為了最後要顯示的內容的位置。

    target是將表單送到iframe去處理。

    而在xxxxx.php的階段

    一開始會取得一個name的數,當然在你存入資料庫也是會有這樣的動作。

    重點是我們要利用這個變數來回傳。

    當一連串資料庫內容完成後。

    我們使用javs script的parent,將資料回傳指向主視窗

    (你原本的頁面是主視窗,而iframe是子視窗,parent就是把內容指向主視窗。

    parent.後面的字就是你的div id所定義的名稱。

    最後的innerText就是在指定的頁籤內容插入資料。

    所以parent.getname.innerText = "<?=$name ?>";

    意思就是在主視窗的id為getname的頁籤中插入文字$name的內容。

    這整個資料處理交換的方式,就叫做AJAI

    比AJAX簡單十倍。但他能做的功能……和AJAX完全一樣。

    另外就是………

    不用去查AJAI,因為一定查不到。

    這個技術是原創發明的人最近一個月才給他定義了名詞。

    而這個技術早在九年前就被發明了。

    只是太多人誤以為他只是AJAX未問世前的過渡產品。

    沒人想到他比AJAX容易學習,效能還和AJAX一樣。

    2009-10-17 14:46:52 補充:

    AJAI未限定使用PHP!ASP、JSP、ASP.NET均可使用。

    事先不需要像XML定義一堆東西。

    算是即時設定即時可使用的。

    總之最後只要能將資料利用 innerTxet做回傳就行了。

    雖然你的問題是寫AJAX。

    但你最終目的只是為了在欄位之後顯示資料。

    另外,如果你希望在輸出之後,原欄位資料清空的話。

    就在parent.getname.innerText下一行輸入

    parent.表單名稱,name.value ="";

    這樣就可以直接把輸入的欄位清空。

    2009-10-17 14:55:48 補充:

    順便再補充。

    如果你的$name的內容是html的話!

    就可以把div中的內部內容通通換掉。

    只要把innerText改成innerHTML(但我試過這二個都一樣可以用)

    也就是說!如果你的網頁只有一個區塊想換掉的話。

    就可以使用這個方式。但是這不能單純使用。

    因為innerHTML對於雙引號和換行會出現判斷錯誤。

    所以在你的php中的字串要如下做處理。

    2009-10-17 15:00:28 補充:

    假設你有一個html的檔案頁面。

    檔名:1.html

    第一種做法:

    $html = file_get_contents("1.html");

    $html = str_replace("\"","'",$html);

    $html = str_replace("\r\n,"",$html);

    再把$html做回傳就可以置換整個要變換的部份。

    (也就很多人在問如何可以只變動網頁某個區域的做法,完全取代iframe的區域讀取網頁的功能,而且這種做法讓網頁擁有良好一致性)

    2009-10-17 15:02:25 補充:

    第二種做法:

    $load_page = file("1.html);

    foreach($load_page as $value){

    $html .= $value;

    }

    $html = str_replace("\"","'",$html);

    $html = str_replace("\r\n,"",$html);

    一樣是把$html回傳就行了。

    2009-10-17 15:15:05 補充:

    再來,如果是資料讀取,像是讀到新的資料要新增一行,但是插入在最後一行。

    寫法如下:

    parent.插入元素id.innerHTML += "新增的資料";

    但若是要插入在第一行就樣寫:

    parent.插入元素id.innerHTML = "新增的資料"+parent.插入元素id.innerHTML;

    我想講這麼多用法,你的網頁設計應該就變得相當豐富了。

    2009-10-17 18:05:31 補充:

    以上功能AJAI支援多瀏覽器。

    各瀏覽器的特性會依java script對各瀏覽器的支援不同而有所不同。

    因此在功能上完全特同於ajax,當然在java script的限制上。

    ajax的一些限制在ajai「有可能」但不一定會出現。

    除非瀏覽器本身對JAVA SCRIPT或HTML有不相容不支援的可能性情形出現。

    (以FIREFOX來說,就是把ID名稱改成document.getElementById("ID名稱")就行了。

    這個做法會變成ie和firefox及opera還有google瀏覽器都可使用。

    2009-10-17 18:08:54 補充:

    ajax要學,看一整本書都還不見得學得會。

    還得另外學xml語法,加上一長串的語法。

    對於要即學即用來說限制很大。

    在學習快速及效率功能皆和ajax完全一樣的情形下。

    實在想不到有什麼理由不使用ajai。

    有啦!除非iframe不再是html的標準語法的時候。

    (話說,萬一反過來是瀏覽器不支援xmlrequest怎麼辦?

    ajax不就無用武之地了?)

    2009-10-17 18:13:49 補充:

    至於為什麼我們要大力推廣ajai?

    就是因為有太多人花精力花時間去學習ajax。

    結果可能是有看沒有理解或是在實作上發生困難。

    但AJAI真的要教,像我這樣用文字敘述可能還要花幾個小時研究一下。

    如果是面對面教學,那是20分鐘以內就教完的東西還記沒多少指令功能就會用了。

    我們強調的敏捷開發,不是只有寫程式要簡潔有效率。

    連學習都要很有效率,即學即用是最好的。

    更多時候!很多人學AJAX有時只是單純為了小小的顯示和切換。

    拿AJAX的學習時間做這樣的小功能來說實在不成比例。

    2009-10-17 22:28:13 補充:

    我所教的方法:

    這個行為本身就是post的行為了。

    所以應當不會有你問的情況發生才是。

    在php就是$_POST["name"]像這樣的接收就行了。

    因為表單就是送到iframe做「背景處理作業」

    因為iframe已經用css隱藏了所以是看不到的。

    2009-10-17 22:45:59 補充:

    原來新的知識介面還是會刪掉html……

    &lform method="post" action="xxxx.php" target="_loaddata"&gt

    上面那行空白是這個。

    2009-10-17 22:47:00 補充:

    <form method="post" action="xxxx.php" target="_loaddata">

    2009-10-17 23:00:02 補充:

    本來想直接用知識家寫信給你。

    無奈你不接受網友來信。

    所以看看是不是反過來你寫信給我。

    我不確定你是不是學AJAX有一段時日或是才剛開始學。

    無論如何,我想AJAI的方式不太需要那麼多麻煩的程式跑來跑去造成困擾。

    更何況有很多東西也許重用性高,簡單的寫法搭配任何一種server端程式比較理想。

    可能的話。請來信。

    2009-10-18 09:05:31 補充:

    抱歉!我的意見是寫給原po的。

    另外我不是什麼php高手啦。

    推AJAI是因為簡單容易上手快速加上功能和AJAX的原則是相同的。

    AJAI簡單就像你看到的單純的資料變化。

    複雜的像即時繪圖處理或是GOOGLE MAP的功能他也做得到。

    AJAX和AJAI的功能可以說完全一樣。

    差異性是xmlrequest以及iframe

    但是要額外學習xml以及太多的語法編輯說真的會比較有困擾。

    2009-10-19 09:36:28 補充:

    innerHTML他是DHTML(動態HTML)的語法

    功能是在HTML的標籤(TAG)中插入原始碼並刪除原本存在於TAG中的內容。

    innerText則是插入新文字並刪除原本文字。

    這樣你就不難理解插入一段新的html並刪掉舊的內容的方式了吧。

  • 1 decade ago

    ajax ,恐怕不太容易,至今我只能返回英文字及數字,未能攪定中文。

    如有問題,請隨意提出。

    xxx.htm

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=big5">

    <meta http-equiv="PRAGMA" content="NO-CACHE">

    <meta http-equiv="CACHE-CONTROL" content="NO-CACHE">

    <meta name="Expired" content="12-oct-2008 00:00:02">

    </head>

    <script type='text/javascript'>

    var req = null

    if ( window.XMLHttpRequest )

    { req = new XMLHttpRequest()

    req.overrideMimeType('text/xml')

    }

    else

    { try { req = new ActiveXObject("MSXML2.XMLHTTP.6.0") } catch(e){}

    try { req = new ActiveXObject("MSXML2.XMLHTTP.5.0") } catch(e){}

    try { req = new ActiveXObject("MSXML2.XMLHTTP.4.0") } catch(e){}

    try { req = new ActiveXObject("MSXML2.XMLHTTP.3.0") } catch(e){}

    try { req = new ActiveXObject("MSXML2.XMLHTTP") } catch(e){}

    try { req = new ActiveXObject("Microsoft.XMLHTTP") } catch(e){}

    }

    function go_ajax()

    { if (req==null)

    return false

    user = document.forms[0].user.value

    pass = document.forms[0].pass.value

    url = "ajax.php?user=" + user + "&pass=" + pass

    req.abort()

    req.onreadystatechange = expecting_response

    req.open('GET',url,true)

    req.setRequestHeader("If-Modified-Since","0")

    try { req.send(null) }

    catch(e)

    { notice("連接 server 失敗")

    return

    }

    notice("請稍候 ....")

    }

    function expecting_response()

    { if ( req.readyState == 4 )

    { if ( req.status == 200 )

    { if ( req.responseText.charAt(0) == "0" )

    notice("已成功登記,你的登記名稱是:" + user)

    else

    notice("操作失敗,原因是:" + req.responseText)

    }

    else

    { notice("連接 server 失敗")

    }

    }

    }

    function notice(arg)

    { document.getElementById("noticeboard").innerHTML = arg

    }

    </script>

    <body>

    <form>

    Name: <input type="text" name="user"><br>

    Password: <input type="password" name="pass"><br>

    <input type="button" onclick="go_ajax();" value=" Submit ">

    </form>

    <div id="noticeboard" style="color:darkred">請輸入資料</div>

    </body>

    </html>

    2009-10-17 13:04:00 補充:

    <?php

    $user=$_GET[user];

    $pass=$_GET[pass];

    $id = @mysql_connect("localhost","root","");

    if ( ! $id )

    { print "login error";

    exit;

    }

    if ( ! @mysql_select_db("database_name", $id) )

    { print "database error";

    exit;

    }

    2009-10-17 13:04:06 補充:

    $sql="INSERT INTO table_name (username, password) VALUES ($user,$pass)";

    if (! @mysql_query($sql,$id) )

    { print "table error";

    exit;

    }

    print "0";

    ?>

    2009-10-17 13:13:22 補充:

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    html 檔在背景呼叫 ajax.php ,所以此 php 檔須定名為 "ajax.php" ,當然,你可以

    定任何檔名,只要兩方面的檔名要對。

    ajax 沒規定用 php ,也可用其他程式語言,我試過用 perl ,一樣可行。

    php 檔方面接收資料後須要檢查,例如太短太長,用字不合規定,這些由版大自行處理,經處理後要返回不接受的話,這樣寫:

    if ( xxxxxx )

    { print "invalid entry";

    exit;

    }

    print 後要 exit ,否則程式會繼續做下去,再print 其他東西。

    2009-10-17 13:21:57 補充:

    各資料庫探訪語法須用 @ 帶頭,否則遇到錯誤時會連錯誤信息一起返回網頁。

    所有程序通過無誤就返回 "0" 。

    其實php檔每個情況都可返回數字,如:0,1,2,3,4,5,,,,,,由 html 檔看數字輸出相關句子。

    2009-10-17 13:56:46 補充:

    請來測試 ajax 用法

    http://w2.hkmalls.com/rc/138a/xxx.htm

    這裡的 ajax.php 不測試資料庫,改為測試輸入字元,然後返回信息。

    2009-10-17 15:01:26 補充:

    以上 JAVASCRIPT + AJAX 是跨瀏覽器的,IE 及 Firefox 都可行無誤。

    2009-10-17 21:13:48 補充:

    >>如果要用POST傳送那該怎麼做呢??因為我不太希望使用者看到內容

    版大在問 Ajax 嗎?

    Ajax 是在背景下查詢 server ,無論 GET 或 POST 都不會顯示出來,曾經去過 server 又返回來,整個過程都不會被察覺。

    無論如何,我都寫 POST 方法出來。

    2009-10-17 21:46:26 補充:

    javascript

    ~~~~~~~

    function go_ajax()

    { if (req==null)

    return false

    user = document.forms[0].user.value

    pass = document.forms[0].pass.value

    url = "ajax2.php"

    data = "user=" + user + "&pass=" + pass

    2009-10-17 21:47:56 補充:

    req.abort()

    req.onreadystatechange = expecting_response

    req.open('POST',url,true)

    req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    req.setRequestHeader("Content-length", data.length);

    2009-10-17 21:48:11 補充:

    req.setRequestHeader("If-Modified-Since","0")

    req.setRequestHeader("Connection", "close");

    try { req.send(data) }

    catch(e)

    { notice("連接 server 失敗")

    return

    }

    notice("請稍候 ....")

    }

    2009-10-17 21:54:38 補充:

    html 檔除了修改上述部份外,其他部份不須改。

    ~~~~~~~~~~~~~~~~~~~~~~~~

    php 檔只將 

    $user=$_GET[user];

    $pass=$_GET[pass];

    改為:

    $user=$_POST[user];

    $pass=$_POST[pass];

    $user=$_REQUEST[user];

    $pass=$_REQUEST[pass];

    (REQUEST 是 GET, POST 通用)

    2009-10-17 21:56:21 補充:

    ●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

    請來測試POST方法的 Ajax

    http://w2.hkmalls.com/rc/138a/xxx2.htm

    ●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

    2009-10-17 22:02:31 補充:

    我有一個網頁,內有 web-based email,使用 Ajax 作背境寄信,是使用

    POST 方法的,想研究 Ajax 不妨來參考一下。

    http://w2.hkmalls.com/poem/home.htm

  • 1 decade ago

    你可以直接text1.text=textbox1.text

    然後直接把資料存到資料庫裡面去

Still have questions? Get your answers by asking now.