0

Ajax を使用してフォームを送信し、データをデータベースに保存しています。データベースにデータを保存しており、ページをリロードせずに、そのコンテンツが追加されたことを示す警告ボックスを表示しています。同じページにデータベースのコンテンツが表示されています。追加されたばかりの情報を取得できるように、ページをリロードせずにその部分を自動的に更新する必要があります。

<script type="text/javascript">
function GetXmlHttpObject()
{
    if(window.XMLHttpRequest)
    {
        return new XMLHttpRequest();

    }
    if(window.ActiveXobject)
    {
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
    return null;

}
function submitformwithajax()
{
    var myAjaxPostrequest=new GetXmlHttpObject();

    var coursename=document.getElementsByName('cvalue')[0].value;

    var parameter="cvalue="+coursename;

    myAjaxPostrequest.open("POST", "process/do_course.php", true);
    myAjaxPostrequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    myAjaxPostrequest.send(parameter);
    myAjaxPostrequest.onreadystatechange=function(){
        if(myAjaxPostrequest.readyState==4){
            if(myAjaxPostrequest.status==200){



                if(myAjaxPostrequest.responseText=="true")
                {
                alert("Course Has Been Successfully Added To The Curiculum !");
                 var container = document.getElementById('c');
                var refreshContent = container.innerHTML;
                container.innerHTML = refreshContent;
                }

            }
            else
            document.getElementById("submitcourse").innerHTML="An error has occured making the request";

        }
    }
}
</script>

「c」は、リロードする必要がある div タグの ID です。

ありがとう

4

4 に答える 4

1

これは少しナンセンスに思えます：

var refreshContent = container.innerHTML;
container.innerHTML = refreshContent;

そうすれば、更新する必要はなく、内容はまったく同じです。

「DBコンテンツ」が何を意味するのか正確にはわかりません。コース名がDIVに追加したいものであると仮定すると、次のようなことを行う必要があります。

container.innerHTML += '<p>'+ coursename +'</p>';
于 2013-03-20T18:28:48.923 に答える
1

jQuery はあなたの仕事に多くの利益をもたらします。jQuery を介した現在のコードは次のようになります。

function submitformwithajax() {
    var coursename = $("[name=cvalue]").val();

    $.post("process/do_course.php", {cvalue: coursename}, function(response) {
        if (response === "true")
        {
            alert("Course Has Been Successfully Added To The Curiculum !");
            var container = $("#c");
            // Not sure why you're setting the container to the container here    
            container.html(container.html());
        }
        else
            $("#submitcourse").text("An error has occured making the request");
    }, "text");
}

コンテナーのテキストをコンテナー内のテキストに設定する理由はわかりませんが、それが問題である可能性があります。サーバーの応答がエリアに表示する必要があるデータを返した場合は、jQuery (または、必要に応じて DOM) を使用して、その場でフィールドまたは要素を更新 (または必要に応じて追加) できます。GET リクエストに基づいてそのセクションを更新する必要がある場合は、success ステートメントのデータに対して GET リクエストを行うだけです。

また、プレーン テキストではなく、サーバーからの戻り値の型に JSON を使用することをお勧めします。Aを使用すると、そこで文字列比較を使用する代わりに{"success": true}チェックできます。if (response.success)

また、最後の補足として、Javascript では、値と型の両方が一致することを常に検証===する必要があります。これの欠点は、Javascriptではそうではありません。=====1 == "1"1 === "1"

編集

あなたのコメントに応えて、jQueryルートを追求しない場合でも、ここで説明したすべてを実装できますが、応答を手動で解析する必要があります:

var resposne = JSON.parse(myAjaxPostRequest.responseText);

そこから、引き続き確認できますif (response.success)。

個人的には、この長くて複雑な方法を学生に示してから、jQuery を使ってそれを行う方法を教えることをお勧めします。彼らのいずれかがWeb開発のキャリアを追求する場合、jQueryまたはそれに非常に似た機能を使用するかのいずれかを使用します。これらのことについては、採用後ではなく早い段階で学ぶのが最善です. また、リクエストが成功したことを確認できるように"true"言うだけでなく、データを返すより表現力豊かな方法であるため、サーバーから JSON を返すことをお勧めします。{"success": true}

于 2013-03-20T18:32:58.953 に答える
0

コードを見た後：あなたはそのテーブルをAJAXで埋めていません。私はあなたにこのアドバイスを与えることしかできません。そのテーブルにJavascriptを動的に入力します。

  1. を見つける関数を作成しますdiv#c。
  2. 子供がいる場合div#cは、子供を破壊します。
  3. 新しい要素テーブルを作成します。
  4. そのテーブルを新しい行で埋めます。

これは、Ajaxによって提供されるサーバーからのデータを使用して動的にテーブルを作成する方法です。したがって、フォームからデータを送信した後、この関数を呼び出すことができ、テーブルが再作成されます。

于 2013-03-20T18:45:16.590 に答える
0

これを行う最も簡単な方法は、ajax 呼び出しから "c" 要素の内容を返し、"c" の古い内容を ajax 呼び出しによって返された内容に置き換えることです。

于 2013-03-20T18:27:44.467 に答える