Не удается заставить jQuery ajax работать

ProgramBox

Не удается заставить jQuery ajax работать

Post author:admin
Запись опубликована:24 апреля, 2023
Post category:Вопросы по программированию

#php #jquery #html #ajax

#php #jquery #HTML #ajax

Вопрос:

Я пытаюсь преобразовать свою веб-страницу в ajax, но я не могу заставить ее что-либо возвращать.

HTML

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>test page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){   
  // events
$("#test").click(function(){
    var myData;
    myData = makeDataVar();
    sendData(myData);
});     
  // functions
function makeDataVar(){
    return "name=joeamp;location=bostin";
}
function sendData(myData){
    alert("start mydata function");
    $.ajax({
        type: "POST",
        url: "http://www.mypage.com/submitMe.php",
        dataType : "json",
        data: myData,
        success: function (msg) {
            alert("Data saved: "   nameMsg);
            alert("Data saved: "   locationMsg);
            alert("data saved: "   error);
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert("error "   errorThrown);
        }
    }); 
    alert("end mydata function");           
}
}); // end document.ready
//-->
</script>    
</head>

<body>

<button type="button" id="test" >Add New</button>

</body>
</html>

PHP

 <?php
$myVar = $_POST['name'];
$return['nameMsg'] = "thanks $myVar";
$myVar = $_POST['location'];
$return['locationMsg'] = "from $myVar";
$return['error'] = false;
echo json_encode($return);
?>

Я получаю все мои предупреждения javascript, за исключением тех, которые находятся внутри инструкции ajax (ни успеха, ни ошибки). Похоже, что мой скрипт пропускает это одно утверждение. Я не уверен, чего мне здесь не хватает, но я потратил пару часов, пытаясь это выяснить. Мы были бы очень признательны за любую помощь, которую вы могли бы предложить.

1. type должно быть в нижнем регистре, хотя я не уверен, что это ваша единственная проблема.

2. Успешный обратный вызов вызывается только тогда, когда сервер возвращает успешный код 2xx. Вы уверены, что ваш сервер не выдает никаких ошибок?

3. @scurker — он получит условие ошибки. Единственный случай, о котором я знаю, это если он пытается сделать что-то междоменное без jsonp. В этот момент XHR просто исчезает.

4. Упс, пропустил это. Единственное, что можно сделать, не указав правильный тип, это заставить его отправлять через GET вместо POST .

Ответ №1:

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

 alert("Data saved: "   nameMsg);
alert("Data saved: "   locationMsg);
alert("data saved: "   error);

nameMsg , locationMsg и error , похоже, нигде не определены. Кажется, что это маскируется под метод, который иногда не выполняется, но Firebug или инструменты разработчика Chrome должны показать вам ошибку.

Выполняется ли ваш успешный обратный вызов, если вы не пытаетесь их использовать? Просто выполните

 alert("foo");

и посмотрим, сработает ли это.

1. Вы правы, что исправили это. Мне нужно было использовать msg.nameMsg, потому что msg — это мой входящий параметр. Спасибо, иногда я упускаю из виду некоторые вещи после слишком долгой работы над чем-то.

2. Я рад, что мой 101-уровневый javascript смог помочь. Я много раз видел, как мои обратные вызовы не выполнялись из-за этого!

Ответ №2:

Вы сталкиваетесь с этим из www.mypage.com ? Если вы этого не сделаете, XHR просто будет съеден без возврата (ошибка или успех).

Кроме того, у вас опечатка … ‘type’ должен быть в нижнем регистре, но это не должно вызывать вашу проблему.

1. нет, я просто изменил код на mypage.com для этого поста. Я исправил опечатку и обновил свою страницу, но по-прежнему не могу зайти.

2. Мой вопрос … вы заходите на страницу из того же домена (и поддомена), из которого вызываете AJAX?

3. Пора запускать анализатор пакетов. Вы можете использовать сетевую консоль в firebug / chrome / safari … или использовать внешнюю консоль, такую как Fiddler (win) / HTTPScoop (mac). Хотя я не думаю, что вы вообще добираетесь до своего сервера, потому что вы должны вернуть что-то в один из обратных вызовов. Если у вас есть общедоступный URL, я был бы рад взглянуть.

Ответ №3:

Это должно быть

 $.ajax({
    type: "POST",
    ....
});

Используйте что-то вроде Firebug для проверки вашего JS на наличие ошибок.

Вам также нужно убедиться, что вы вызываете это из того же домена.

1. Я тоже голосую за проверку ошибок javascript. Определили ли вы nameMsg , locationMsg и error на своей странице?

2. Выше пользователь сказал, что он / она уже изменил тип, но безрезультатно: «Я исправил опечатку и обновил свою страницу, по-прежнему не заходя».

3. Я вижу это. У меня был этот ответ до того, как они прокомментировали это.

Ответ №4:

Также существует вероятность того, что ваш php-скрипт может выдавать «уведомление» в выходные данные из-за того, что переменная $return не инициализирована, тем самым не возвращая допустимый JSON

попробуйте

 $return = array();

перед его использованием

Ответ №5:

Это то, чего ты хочешь? Просто скопируйте и вставьте это в свой HTML-файл и измените ссылки..

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>test page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){   
  // events
$("#test").click(function(){
    var myData;
    myData = makeDataVar();
    sendData(myData);
});     
  // functions
function makeDataVar(){
    return "name=joeamp;location=bostin";
}
function sendData(myData){
    alert("start mydata function");
    $.ajax({
        type: "POST",
        url: "http://www.mypage.com/submitMe.php",
        dataType : "json",
        data: myData,
        success: function (msg) {
    //function returns json object not variables
            alert("Data saved: "   msg.nameMsg);
            alert("Data saved: "   msg.locationMsg);
            alert("data saved: "   msg.error);
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert("error "   errorThrown);
        }
    }); 
    alert("end mydata function");           
}
}); // end document.ready
//-->
</script>    
</head>

<body>

<button type="button" id="test" >Add New</button>

</body>
</html>