1

トピックのタイトルが曖昧で申し訳ありませんが、これをどのように置くかわかりません。プロファイルの編集機能を持つ Web サイトを作成しています。ユーザーがフォームに入力して [プロファイルの編集] ボタンをクリックすると、PHP を介して処理され、編集が成功すると (jquery を介して) アラートが表示されます。ユーザーがナビゲーション リンクをクリックしたときに表示される非表示の div があります。ただし、View Profile (Home) をクリックすると、表示プロセスでページをロードしなかったため、更新されたものではなく、古い SQL 情報が表示されます。ページをロードせずに Web サイトに情報を更新させるにはどうすればよいですか?

これは html/jquery コードです:

$("#editButton").click(function(){
    $.post("editprofile.php",
    {
        fname: $("#fnameBox").val(),
        lname: $("#lnameBox").val(),
        contact: $("#contactBox").val()
    },
    function(data){
      console.log(data)
    });
});

HTML内のPHP

<div id="profile">
    <?php echo "Name: " . $array['firstname'] . " " . $array['surname'] . "<br>Contact Number: " . $array['contactNumber'];?>
</div>
4

2 に答える 2

2

これはばかげているように聞こえるかもしれませんが、editprofile.php スクリプトを信頼している (たとえば、失敗しない) 場合は、<div>そのスクリプトの呼び出しと共に #profile コンテンツを更新してみませんか? このようなもの ：

$("#editButton").click(function(){
    $.post("editprofile.php",
    {
        fname: $("#fnameBox").val(),
        lname: $("#lnameBox").val(),
        contact: $("#contactBox").val()
    },
    function(data){
      console.log(data)
    });
    $("#profile").html(
        "Name: " + 
        $("#fnameBox").val() + 
        " " +
        $("#lnameBox").val() +
        "<br>Contact Number: " +
        $("#contactBox").val()
    );
});

私が見る限り、これはページのリロードと同じエクスペリエンスをユーザーに提供します。また、editprofile.php が失敗した場合でも、害はありません。

于 2013-10-23T13:57:58.660 に答える
1

$.postの省略形である which$.ajaxを使用するとfunction(data)、 ajax が成功したときに何が起こりますか。

そのconsole.log(data)関数に #profile div を更新するコードを含めることができます。理想的な方法は、editprofile.php返された fname lname と連絡先を ajax 呼び出し (データ) を json 文字列としてサニタイズし (これは非常に簡単です。以下に例を示します)、それを使用して #profile div を設定することです。

editprofile.php: データベース ロジックの後に、json 文字列を返すようにします。

<?php
    //Make sure this is the onlything echoed in the php file.
    //Sanitize your $_POST first im not doing it here but you should be careful with that;
    echo json_encode($_POST); 
?>

Javascript:

$("#editButton").click(function(){
    $.post("editprofile.php",
    {
        fname: $("#fnameBox").val(),
        lname: $("#lnameBox").val(),
        contact: $("#contactBox").val()
    },
    function(data){
        try{ 
            jdata = JSON.parse(data);
            $('#profile').html('Name: '+jdata.fname+' '+jdata.lname+'<br> Contact Number'+jdata.contact);
        } catch(e){
            //code to manage the error
            //If you are 100% sure the editprofile will work and don't want to catch the errors
            //Just use the code inside the try{} and forget the try...catch
        }
    });
});

ところで、フィールドを個別に取得する代わりに、フォームのみを対象にする.val()ことができます。.serialize()

//This would do the same as the code above without trying to catch the error:
$.post("editprofile.php", $('#myForm').serialize(), function(data){
    jdata = JSON.parse(data);
    $('#profile').html('Name: '+jdata.fname+' '+jdata.lname+'<br> Contact Number'+jdata.contact);
});
于 2013-10-23T14:02:08.797 に答える