2

AJAX の新機能。ページ全体をリロードせずに GET リクエストを送信する方法が少しわかりません。

  1. ユーザーの訪問www.example.com/products/
  2. タイプ「ガーデニングツール」
  3. www.example.com/products/results?search=Gardening+Tools結果は、ページのリロードなしで行われるすべての URL の変更とともにインラインで読み込まれます。
  4. どのユーザーも URLwww.example.com/products/results?search=Gardening+Toolsを使用して同じ結果を得ることができます。

注:箇条書き 4 は重要です。URL にパラメーターを追加するだけで、そのように見えるハックな方法であってはなりません。ブックマークしたいユーザーもいるかもしれません (GET最初にリクエストを使用したのはそのためです)。

したがって、これは a で機能する私のコードの基本的な表現ですPOST:

フォーム: を使用した基本的な提出POST、私はこれを希望しますGET。

<form id="submit" action="" method="POST">
   <input type="text" name="search"/>
   <button type="submit"></button>
</form>

jQuery : を使用してリクエスト.ajax()を送信しますPOST/products/results.php

$('form#submit').submit(function (e) {
e.preventDefault();
$.ajax({
        type: 'POST',
        url: 'results.php',
        data: "search="+encodeURIComponent($('input[name="search"]').val()),
        dataType: 'json',
        success: function(data) {
            //inject some html into page
        }
    });
 }

results.php : (また、ここで SQL インジェクションから保護されていることを確認するために、魔法の引用符はオフになっています)。

$query = $_POST['search'];
$query = mysql_real_escape_string($query);
$query = htmlspecialchars($query);
//you get the point: straight forward db connect, query and return as json

POSTそのため、すべてのs をs に変更しようとしましたが、うまくいきませGETんでした。私が理解していない概念はありますか？

$('form#submit').submit(function (e)および preventDefault() 関数と関係があると思います。ただし、ページのリロードを停止するには preventDefault が必要です。

4

2 に答える 2

1 
<input type="text" name="search" id="search"/>

と

$('form#submit').submit(function (e) {
e.preventDefault();
var search = $('#search').val();
$.ajax({
        type: 'POST',
        url: 'results.php',
        data: {search:search},
        dataType: 'json',
        success: function(data) {
            //inject some html into page
        }
    });
 }
于 2013-04-16T05:01:35.690 に答える
-1

非常に簡単な例を挙げましょう。

フォーム: - ここでは、AJAX を使用するためのアクションとメソッドは必要ありません。

 <form id="form1">
       <input type="text" class='search' name="search"/>
       <button type="button" onclick="funcAjax()">Load Results</button>
 </form>

jQuery: - ここでは、関数「funcAjax()」を定義します。

xmlhttp.responseTextは、php ページから返される値です。

function funcAjax()
{
    //value to be searched
    var searchVal= $('.search').val();
    var xmlhttp;
    if (window.XMLHttpRequest){
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else{
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
             document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
             //xmlhttp.responseText is the value returned from your php page
        }
    }

    xmlhttp.open("GET","results.php?q="+searchVal,true);
    xmlhttp.send();
}

results.php:

$query = $_GET['q'];
//rest follow your code
于 2013-04-16T04:16:53.570 に答える