jQuery ページの更新 (部分的、すべて) 問題分析

jQuery ページの更新 (部分的、すべて) 問題分析_jquery

WBOY

リリース： 2016-05-16 15:20:54

オリジナル

1400 人が閲覧しました

この記事の例は、jquery の更新の問題を紹介するために 2 つの部分に分かれています。最初の部分ではページの部分的な更新が紹介され、2 番目の部分ではページの完全な更新が紹介されます。
最初: ページの部分更新

jQuery は Ajax 操作をカプセル化します。jQuery では、$.ajax() メソッドが最下層で、2 番目の層は laod()、$.get()、および $.post() メソッドです。 $.getScript() メソッドと $.getJSON() メソッドです。

分析に重点を置く通常、load() メソッドは、Web サーバーから静的データファイルを取得するために使用され、サーバー内のページにいくつかのパラメーターを渡すには、$.get() メソッドまたは $.post() メソッドを使用できます。 ajax メソッド

load() Code 
//无参数传递，则是GET方式
$("#resText").load("test.php",function(){
//......
});

//有参数传递，则是POST方式
$("#resText").load("test.php",{name:"xht555",age:"24"},function(){
//......
});

ログイン後にコピー

post と get の違いについて簡単に説明しましょう:

get: get メソッドを使用して単純なデータを送信します (つまり、ブラウザーは、URL パラメーターの形式に従って、各フォームフィールド要素とそのデータを URL の末尾に追加します)。ただし、サイズは通常、次のように制限されます。 1KB; クライアントのブラウザによってキャッシュされています、立ち上がってください、安全ではありません。

post: ブラウザーは、各フォームフィールド要素とそのデータを、URL アドレス

のパラメーターとして渡すのではなく、HTTP メッセージのエンティティコンテンツとして Web サーバーに送信します。

概要:

1: GET メソッドは送信するデータ量が少なく、処理効率が高く、セキュリティが低いためキャッシュされますが、POST はその逆です。

2: AJAX の文字化け問題文字化けの原因：
1. xtmlhttp が返すデータのデフォルトの文字エンコードは utf-8 です。クライアントページが gb2312 などのエンコードデータの場合、文字化けが発生します
2. postメソッドで送信するデータのデフォルトの文字エンコーディングはutf-8です。サーバー側のエンコーディングがgb2312などの場合、文字化けが発生します

解決策は次のとおりです:

1. クライアントが gb2312 エンコーディングを使用する場合、サーバー上の出力ストリームエンコーディングを指定します

2. サーバーとクライアントの両方で utf-8 エンコーディングを使用します

gb2312:header('Content-Type:text/html;charset=GB2312');

utf8:header('Content-Type:text/html;charset=utf-8');

注: 上記のメソッドに従っても文字化けした文字が返される場合は、メソッドが get であるかどうかを確認してください。get リクエスト (またはパラメータを渡す URL を含むもの) の場合、encodeURIComponent メソッドの処理では、渡されたパラメータが最初に渡される必要があります。を使用しないと文字化けも発生します

$.post() Code 

//$.post()方式：
$('#test_post').click(function (){
  $.post(
   'ajax_json.php',
   {
    username:$('#input1').val(),
    age:$('#input2').val(),
    sex:$('#input3').val(),
    job:$('#input4').val()
   },
   function (data) //回传函数
   {
    var myjson='';
    eval('myjson=' + data + ';');
    $('#result').html("姓名:" + myjson.username + "<br/>工作:" + myjson['job']);
   }
  );
  });



$.get() Code 
//$.get()方式：
$('#test_get').click(function ()
{
  $.get(
   'ajax_json.php',
   {
    username:$("#input1").val(),
    age:$("#input2").val(),
    sex:$("#input3").val(),
    job:$("#input4").val()
   },
   function(data) //回传函数
   {
    var myjson='';
    eval("myjson=" + data + ";");
     $('#result').html("姓名:" + myjson.username + "<br/>工作:" + myjson['job']);
   }
  );
});


});

$.getJson(”Default.php”, {id:”1″, page: “2″ },
function(data){
//注意，这里返回的JSON数据格式，不同于xml.
});

ログイン後にコピー

2 番目: すべてのページを更新