2012-01-30 4 views
0
<html> 
<head> 

<title>Testing AJAX</title> 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

<script> 
    function init() { 
     $("#form1").submit(submitForm); 
    } 

    function submitForm() { 
     var paramValue = $("#param_input").val(); 

     $.ajax({ 
       type: "GET", 
       url: 'http//xxx.edu/xxx/autocomplete.php', 
       data: { 
        query: paramValue 
       }, 
       dataType: "json", 
       complete: function(data){ 
        alert(JSON.stringify(data)); 
       } 
     }); 
    } 

    // On page load 
    $(document).ready(init); 

</script> 
</head> 

<body> 

<form id="form1" name="form1_name" action="" > 
<label for="find">Value</label> 
<input type="text" name="param" id="param_input" /> 
<input type="submit" name="button" id="button" value="Find"> 
</form> 

</body> 

</html> 

Я действительно хочу, чтобы иметь возможность запросить мой PHP скрипт (который возвращает JSON через json_encode()) и использовать эту информацию JSON.JQuery Ajax запрашивая PHP скрипт

Сейчас окно предупреждения говорит следующее:

{"readyState":0,"responseText":"","status":0,"statusText":"error"} 

Так что я делаю что-то неправильно. Есть идеи? Я все новичок в AJAX/jQuery.

EDIT: добавлена ​​DATATYPE: "JSON", но это не помогло - все равно возвращался неправильный материал JSON ...

+0

ли вызов на одного источника сценария, т.е. сценарий будучи побежал на том же сервере, что и тот, который создает страницу, которая вызывает $ .ajax? – CBusBus

+0

Вы проверили (в firebug, fiddler, ...), если php-скрипт возвращает действительные/любые данные? – roberkules

ответ

1

успех использует вместо полного, так как в успехе обратного вызова, вы получите ваши данные. В комплекте вы получите объект XHR

Приведи ниже сценария

function submitForm() { 
    var paramValue = $("#param_input").val(); 

    $.ajax({ 
      type: "GET", 
      url: 'http//xxx.edu/xxx/autocomplete.php', 
      data: { 
       query: paramValue 
      }, 
      dataType: "json", 
      success: function(data){ 
       alert(JSON.stringify(data)); 
      } 
    }); 
} 
+0

, когда я использую 'success', я ничего не получаю (предупреждение не появляется), в отличие от неправильного предупреждения. , – lollercoaster

0

Попробуйте пропусканием dataType параметров для JQuery-х ajax.

Например:

$.ajax({ 
      type: "GET", 
      url: 'http//xxx.edu/xxx/autocomplete.php', 
      data: { 
       query: paramValue 
      }, 
      dataType: 'json', 
      complete: function(data){ 
       console.log(data); 
      } 
    }); 

Одним из преимуществ Ajax интерфейса JQuery является то, что вы не должны JSON.parse (или хуже, eval), если вы используете правильный dataType флаг.

+0

hmm. что на самом деле ничего не меняет, когда я его добавляю. – lollercoaster

+0

Вы пытаетесь сделать это через домены? домен, протокол (http/s) и порт, все должны соответствовать в большинстве случаев для соответствия политике одного и того же происхождения. Каков код состояния ответа? – buley

+0

nope, мой домен. также при использовании синтаксического url: '../ xxx/autocomplete.php', происходит такое же поведение.статус (как вы можете видеть выше) равен 0. Не знаю, как увидеть статус HTTP. используя 'console.log (data)' показывает ' Ресурс интерпретируется как Другой, но передается с типом MIME undefined.', поэтому я не знаю, что происходит ... – lollercoaster

0

Вы только что добавили dataType к вашему звонку $ .ajax.

function submitForm() { 
    var paramValue = $("#param_input").val(); 

    $.ajax({ 
      type: "GET", 
      url: 'http//xxx.edu/xxx/autocomplete.php', 
      data: { 
       query: paramValue 
      }, 
      dataType: "json", 
      complete: function(data){ 
       alert(JSON.stringify(data)); 
      } 
    }); 
} 

В качестве альтернативы вы можете объявить возвращаемое содержимое json, объявив его в заголовке ответа HTTP.

header('Cache-Control: no-cache, must-revalidate'); 
header('Content-type: application/json'); 

Вы бы использовали приведенное выше, если бы вы были ограничены ванильным JS, это, возможно, хорошая практика, чтобы использовать его в любом случае.

+0

hmm. что на самом деле ничего не меняет, когда я его добавляю. – lollercoaster

+0

Это единственная распространенная ошибка в вашем коде. Каков результат завершения, если вы используете console.log(), строку, объект и т. Д.? – CBusBus

+0

с помощью 'console.log (data)' показывает 'Resource интерпретируется как Other, но передается с типом MIME undefined.', поэтому я не знаю, что происходит ... – lollercoaster

0

Если вы намереваетесь также отправлять данные JSON, тогда вам нужно будет уже передать данные, отправленные на сервер.

$.ajax({ 
    type: "GET", 
    url: 'http//xxx.edu/xxx/autocomplete.php', 
    data: JSON.stringify({ 
     query: paramValue 
    }), 
    dataType: "json", 
    complete: function(data){ 
     alert(JSON.stringify(data)); 
    } 
}); 

вы должны добавить файл JavaScript, чтобы убедиться, что JSON парсер существует: https://github.com/douglascrockford/JSON-js/blob/master/json2.js

+0

nope, не отправляя JSON. просто GET params – lollercoaster

0

Похож Междоменный вызовом, который потерпит неудачу, если не использовать JSONP или некоторые хаки. Вы должны искать хаки для перекрестного вызова домена что-то работать, как YQL

http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-cross-domain-ajax-request-with-yql-and-jquery/

+0

nope это мой домен. также при использовании синтаксиса 'url: '../ xxx/autocomplete.php',' то же поведение происходит – lollercoaster

Смежные вопросы