JQuery Ajax не возвращает переменные из внешнего PHP - PullRequest
Новая
       0

JQuery Ajax не возвращает переменные из внешнего PHP

0 голосов
/ 27 сентября 2011

У меня есть этот код, который берет информацию из формы и отправляет ее в form.php, где она обрабатывается. form.php отображает переменные (полное имя: $ полное имя E-mail: $ электронная ссылка: $ link инструкции: $ instr), которые должны быть введены в #success. Мой код ведет себя двумя разными способами в Firefox и Chrome.

В Firefox меня отправляют в form.php, который правильно отображает вывод, но, очевидно, меня туда не отправляют, я должен оставаться на своей главной странице и видеть этот вывод в #success. По сути, Ajax не работает.

В Chrome ajax работает, но тянет только ФИО: E-mail: Ссылка: Инструкции: в #success. По сути, jQuery не передает переменные через POST.

mainpage.php: 

<script type="text/javascript">
$(document).ready(function() {
    var data = $(form).serialize();
    $('#form').submit(function(event) {   
            $.ajax({
            url: '../wp-content/themes/MC/form.php',
            type: 'POST',
            data: data,
            success: function(result) {
                $('#success').html(result);
            }
            }); 
     event.preventDefault();
     });
})
</script>

<div id="exchange_inside">
<div id="formdiv">
<br>
<form method="post" id="form">
    Name / Nom:<input type="text" name="fullname" /><br />
    E-mail / Courriel:<input type="text" name="email" /><br />                          Your Daily URL / Votre URL Quotidien:<input type="text" name="link" /><br />
    Voting Instructions / Instructions de Vote:<textarea name="instr" style="width: 450px; height: 100px;"/></textarea><br />
    <input type="submit" value="Submit" />
</form>
</div>
</div>
<div id="success">
</div>

form.php: 

<?php
if (isset($_POST['fullname'])){
    $fullname = $_POST['fullname'];   
}else{
    echo "No name";
}

if (isset($_POST['email'])){
    $email = $_POST['email'];   
}else{
    echo "No email";
}

if (isset($_POST['link'])){
    $link = $_POST['link'];   
}else{
    echo "No link";
}

if (isset($_POST['instr'])){
    $instr = $_POST['instr'];   
}else{
    echo "No instructions";
}

echo "Name: " .$fullname. " E-mail: " .$email. " Link: " .$link. " Instructions: " .$instr;
?>

Ответы [ 3 ]

1 голос
/ 27 сентября 2011

Попробуйте немного изменить jquery, переместившись на event.preventDefault(); до вызова ajax и исправьте var data = $("#form").serialize();: 

$(document).ready(function() {

    $('#form').submit(function(event) { 
        event.preventDefault();  
        var data = $("#form").serialize();
        $.ajax({
        url: '../wp-content/themes/MC/form.php',
        type: 'POST',
        data: data,
        success: function(result) {
            $('#success').html(result);
        }
        }); 

 });
}); //semicolon here

Поставьте точку с запятой в конце $(document).ready дляхорошая мера.

Перемещение event.preventDefault() до вызова ajax останавливает отправку формы, если по какой-либо причине произошел сбой ajax или в вызове ajax произошла ошибка.Прежде всего, с помощью этого метода отправки формы вы сначала хотите остановить поведение формы по умолчанию.

0 голосов
/ 27 сентября 2011 
$(document).ready(function() {

    $("#form").submit(function(event) {   

         var data = $("#form").serialize();
            $.ajax({
            url: '/echo/json/',
            type: 'POST',
            data: data,
            success: function(data, status, xhr) {

                console.log(data);
                console.log(status);
                console.log(xhr);
                $('#success').html(result.responseText);
            }

            });

    event.preventDefault();
        return false;
     });
})
  1. Ваше объявление данных не было в глобальной области видимости (я упаковал его в нужную локальную область)
  2. $ (form) .serialize () не равно $ ("# form"). Serialize ()
  3. Редактировать обратно в свой URL =)
  4. Используйте Jsfiddle и Firebug / Chrome Dev Tools для проверки вашего кода!

Надеюсь, это поможет

0 голосов
/ 27 сентября 2011

Попробуйте избавиться от $('#form').submit, который отправляет форму без ajax, например: 

$(document).ready(function() {
    var data = $('#form').serialize(); //this selector also needed to be fixed 
    $.ajax({
            url: '../wp-content/themes/MC/form.php',
            type: 'POST',
            data: data,
            success: function(result) {
                $('#success').html(result);
            }
    }); 
});

Редактировать:
Я неправильно понял.Попробуйте сериализовать данные после нажатия кнопки «Отправить», а не при загрузке страницы, чтобы решить проблему Chrome. 

$('#form').submit(function(event) {   
        var data = $('#form').serialize(); //moved this line and fixed selector
        $.ajax({
        url: '../wp-content/themes/MC/form.php',
        type: 'POST',
        data: data,
        success: function(result) {
            $('#success').html(result);
        }
        }); 
        event.preventDefault();
 });

Вы также можете попробовать изменить кнопку отправки на обычную кнопку и связать ajax.на его событие onclick.Это позволило бы избежать проблем с отправкой формы без ajax и исправить проблему Firefox.

...