2

自己送信フォームを使用してデータを処理していましたが、個別に処理する必要があるため、フォームを送信して結果を返し、divに配置する必要があります。フォームがある元のページにデータを戻すには、これを使用AJAXするのが良い方法のようです。私はたくさんの例を見てきましたが、それをどのように行うか、または実際にどのように機能するかを本当に理解していません。

このフォームデータをindex.phpプロセスページに送信して、処理twitterprocess.phpされたデータを表示するために何をする必要があるかを確認したいとします。

<form method="POST" action="twitterprocess.php">
    Hashtag:<input type="text" name="hashtag" /><br />
    <input type="submit" value="Submit hashtag!" />
</form>

これは私が結果を表示するために使用しているものです。

<?php foreach($results as $result) { 
    $tweet_time = strtotime($result->created_at);?>
    <div>
    <div class="tweet"> <?php echo displayTweet($result->text),"\r\n"; ?>
    <div class="user"><?php echo "<strong>Posted </strong>" . date('j/n/y H:i:s ',$tweet_time) ?><strong> By </strong><a rel="nofollow" href="http://twitter.com/<?php echo $result->from_user ?>"><?php echo $result->from_user ?></a></div>
    </div>
    <br />
<? } ?>

私はAJAXを初めて使用しますが、ガイダンスをいただければ幸いです。

4

5 に答える 5

5

* AJAXを使用すると、他のページで生成された出力がこのページの結果になります。

*これで、AJAXを使用してデータを投稿し、結果を取得する場合は、HTMLのフォーム部分でボタンにtype = "submit"を使用せず、type="button"に移動します。

* AJAXコードを介してアクションをトリガーするため、action属性は空白のままにする必要があります。

*以下のコードスニペットにすべてのソリューションを残してください。

以下はAJAXと一緒のHTMLコードです

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Form Handling Through AJAX</title>
<script type="text/javascript">
    function loadXmlDoc(fname, lname){
        var xmlhttp;
        if (window.XMLHttpRequest){
            xmlhttp = new XMLHttpRequest();
        }
        else{
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function(){
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
                document.getElementById("ajaxify").innerHTML =                xmlhttp.responseText;
            }
        }
        xmlhttp.open("POST", "demo_ajax3.php", true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send("fname=" + fname + "&" + "lname=" + lname);
    }
</script>
</head>

 <body>
<p>
    <span id="ajaxify">&nbsp;</span>
</p>
<form  id="frm" action="#">
    <input type="text" name="fn" />
    <input type="text" name="ln" />
    <input type="button" name="submit" value="submit" onclick="loadXmlDoc(fn.value, ln.value)" />
</form>
</body>
</html>

以下は、上記のコードで使用されているPHPコードです。

<?php
$fname = $_POST["fname"];
$lname = $_POST["lname"];
echo "Hello " . $fname . " " . $lname;
?>
于 2012-10-26T13:25:03.053 に答える
2

送信ボタンにIDを割り当て、テキストフィールドにid = "submit"を使用します（id = "text"を使用します）。

クライアント側のjs：

$("#submit").click(function () {
   var postData = new Object(); //for complex-form
   postData.hashTag = $("#text").val();
   $.ajax({
       type: 'POST', //or 'GET' if you need
       contentType: "application/json; charset=UTF-8", //i use json here
       dataType: "json",
       url: "some_url",
       data: JSON.stringify(postData), //or smth like param1=...&param2=... etc... if you don't want json
       success: function (response) {
           //handle response here, do all page updates or show error message due to server-side validation
        },
        error: function () {
            //handle http errors here
        }
    });
  return false; //we don't want browser to do submit

}）;

したがって、ユーザーがjsを有効にしている場合=コードはajaxリクエストを実行し、そうでない場合は-通常のPOSTリクエストが行われます。

サーバー側では、どちらの場合も正しく機能するように、ajaxと通常の送信を異なる方法で処理する必要があります。私はPHPが苦手なので、ここでアドバイスをすることはできません

于 2012-10-26T13:06:25.033 に答える
0

たとえば、jQueryを使用できます。

function doPost(formdata){
    var url="/twitterprocess.php";
    var senddata={'data':formdata};
    $.post(url,senddata,function(receiveddata){
       dosomethingwithreceiveddata(receiveddata);
    }

PHPはJSON形式でsenddataを取得します。適切な応答を処理して送信できます。その応答は、受信したデータを使用して何かを行うことで処理できます。

于 2012-10-26T13:00:21.700 に答える
0

AjaxFormプラグインはこの仕事に適したツールだと思います。

http://www.malsup.com/jquery/form/#tab4

基本的なコード例は次のとおりです。

$(document).ready(function() { // On Document Ready
    var options = {
         target: '#output1', // ID of the DOM elment where you want to show the results
         success: showResponse  
    };

    // bind form using 'ajaxForm'     
    $('#myForm1').ajaxForm(options); 
});

// the callback function
function showResponse(responseText, statusText, xhr, $form)  {
    alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +  
    '\n\nThe output div should have already been updated with the responseText.');
}

PHPファイルで行う必要があるのは、フォームの送信後にDIVに表示する（またはテキスト）バックだけですecho。html

于 2012-10-26T13:16:00.673 に答える
0

jqueryを使用したくない場合は、純粋なjavascriptでこれを試してください

function SendData(Arg) {
    xmlhttp=null;
    var uri = "/twitterprocess.php";
    if(window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
    } else if(window.ActiveXObject) {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    if(xmlhttp!=null)  {
        xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState==4) {
            if(xmlhttp.status==200) {
                var xmlDoc = xmlhttp.responseXML;
                var DateNode=xmlDoc.getElementsByTagName('Date')[0].firstChild.nodeValue;
                var Xml2String;
                if(xmlDoc.xml) {
                    Xml2String = xmlDoc.xml
                } else {
                    Xml2String = new XMLSerializer().serializeToString(xmlDoc);
                }
                document.getElementById("CellData").value=Xml2String;
            } else {
                alert("statusText: " + xmlhttp.statusText + "\nHTTP status code: " + xmlhttp.status);
            }
        }
    }
}
于 2012-10-26T13:25:14.143 に答える