Ajax Почтовый запрос не работает?

Я пытаюсь создать форму, в которой пользователь заполняет информацию и нажимает отправить. После нажатия страница никогда не будет обновляться. Обработка формы и обработка данных будут выполняться после щелчка пользователя.Ajax Почтовый запрос не работает?

Я пытаюсь использовать JQuery и Ajax для достижения этой цели, до сих пор это то, что у меня есть:

HTML

<form class="article_information_form" action="" method="POST"> 
    <label>Title </label> 
    <input type="text" name="articleTitle"> <br> 
    <label>Article URL: </label> 
    <input type="text" name="articleUrl"> <br> 
    <p>Number of pages</p> 
    <select name="numPages"> 
    <option value="" selected></option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
    <option value="6">6</option> 
    <option value="7">7</option> 
    <option value="8">8</option> 
    <option value="9">9</option> 
    <option value="10">10</option> 
    <option value="11">11</option> 
    <option value="12">12</option> 
    <option value="13">13</option> 
    <option value="14">14</option> 
    <option value="15">15</option> 
    </select> 
    <br> 
    <?php echo $message;?> //For Debugging 
    <input type="submit" name="article_info_btn" value="Submit"> 
</form>

PHP

if (isset($_POST["articleTitle"], $_POST["articleUrl"], $_POST["numPages"])) { 
    $message = "Success!"; //For debugging 
}

Ajax

$(document).on('submit', '.article_information_form', function(e) { 
    e.preventDefault(); 
    $.ajax({ 
    type : 'POST', 
    url : '', 
    success : function(data) { 
     alert("Success!"); 
    } 
    }) 
})

После нажатия кнопки submit отображается всплывающее предупреждение окна успеха. Хотя, переменная $message никогда не распечатывает «успех!». Это означает, что он не обрабатывает PHP $_POST.

Как сделать так, чтобы Ajax отправил информацию на PHP $_POST?

источник

2016-07-03 user2896120

Это запрос AJAX, и они используются для извлечения данных в функции успеха, и он создаст новый HTTP-запрос. Он не будет делать запрос на ту же страницу и влияет на эту страницу. Я думаю, вам нужно больше узнать о звонках AJAX. – GillesC

$(".article_information_form").on("submit", function(event) { 
    event.preventDefault(); 
    $.post(window.location , $(this).serialize() , function(result){ 
     alert(result); 
    }); 
});

Вы вратаря прикрепить полезные данные !!

Поскольку вы хотели всю вещь, чтобы быть на одной странице, это было бы возможным способом:

Полный код для легкого понимания:

<?php 
//exececuted only if POST request as in the ajax below. 
if($_SERVER[ 'REQUEST_METHOD']==='POST'){ 
    //your processing here 
    header('Content-Type: application/json'); 
    //lets set the receivedToServer property to what data we got 
    $data = array(); 
    $data['receivedToServer'] = $_POST; 
    //output data as json 
    echo json_encode($data); 
    //kill the page once the data is displayed 
    die(); 
} 
?> 
<!DOCTYPE html> 
<html> 
<head> 
    <title>TEST</title> 
</head> 
<body> 
    <form class="article_information_form" action="" method="POST"> 
     <label>Title </label> 
     <input type="text" name="articleTitle"> 
     <br> 
     <label>Article URL: </label> 
     <input type="text" name="articleUrl"> 
     <br> 
     <p>Number of pages</p> 
     <select name="numPages"> 
      <option value="" selected></option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
      <option value="4">4</option> 
      <option value="5">5</option> 
      <option value="6">6</option> 
      <option value="7">7</option> 
      <option value="8">8</option> 
      <option value="9">9</option> 
      <option value="10">10</option> 
      <option value="11">11</option> 
      <option value="12">12</option> 
      <option value="13">13</option> 
      <option value="14">14</option> 
      <option value="15">15</option> 
     </select> 
     <br> 
     <input type="submit" name="article_info_btn" value="Submit"> 
    </form> 
</body> 
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
<script> 
    $('.article_information_form').on('submit', function(e) { 
     e.preventDefault(); 
     $.ajax({ 
      type: 'POST', 
      url: '', 
      data: $(this).serialize(), 
      success: function(data) { 
       //the processed data available as data variable. 
       //lets log the data received at server property we set before 
       console.log(data.receivedToServer); 
       alert(data.receivedToServer.articleTitle); 
      } 
     }); 
    }) 
</script> 

</html>

источник

2016-07-03 08:55:32 Iceman

alert (result) выводит все на моей странице документа, но скрипт PHP не вызывается – user2896120

, фактически это происходит, потому что ваш php-файл продолжает печатать. – Iceman

$ message не установлен в «Успех!» и не echo'd, хотя – user2896120

Вам необходимо добавить данные на Ajax вызова:

$(document).on('submit', '.article_information_form', function(e) { 
    e.preventDefault(); 
    $.ajax({ 

     type: 'POST', 
     //url: '', by default is the current page url. 
     data: $('.article_information_form').serialize(),//This line 
     success: function(data) { 
      $('.article_information_form type["submit"]').before("<div>"+data+"</div>") 
     } 
    }) 
})

PHP:

if (isset($_POST["articleTitle"], $_POST["articleUrl"], $_POST["numPages"])) { 
    echo "Success!"; //For debugging 
    exit(); 
}

источник

2016-07-03 08:46:06

Хм, по какой-то причине это не работает для меня – user2896120

Просто удалите 'url' по умолчанию - это текущий url страницы;) –

или вы также можете использовать' window.location'. – Iceman

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

Вы должны заметить, что одна вещь о аргументе - это то же имя, что и использование в имени аргумента метода.

$(document).on('submit', '.article_information_form', function(e) 
      { 
       e.preventDefault(); 
       $.ajax({ 

         type : 'POST', 
         url : '', 
         params : {articleTitle: 'Titlename', articleUrl : 'URLName',numPages : 'PagesNo'} 
         success : function(data) 
         { 
         alert("Success!"); 
         } 
        }) 
      });

источник

2016-07-03 08:54:37 Developer

Сообщение $ еще не напечатано по какой-то причине – user2896120

где не печатается $ message – Developer

В моем PHP-скрипте, где $ message установлен в «Success!» – user2896120

На вашей форме добавить идентификатор, в нашем я положил id="form_submit" и action="action.php", вам нужно заменить его своим собственным путем, где должно выполняться действие.

<form id="form_submit" class="article_information_form" action="action.php" method="POST">

также эта линия формы,

<input type="button" id="submit" name="article_info_btn" value="Submit">

изменить тип type="bumit" для type="button", чтобы предотвратить представление по умолчанию.

и JQuery,

$('#submit').click(function() { 
    var submit_url = $(this).parent('form').attr('action'); 
    $.ajax({ 
    type : 'POST', 
    url : submit_url, 
    data : $('#form_submit').serialize(), 
    dataType : 'json', 
    success : function(data) { 
     alert("Success!"); 
    } 
    }) 
})

Эта линия var submit_url = $(this).parent('form').attr('action'); получить путь на action="" и использовать этот путь для передаваемых данных.

источник

2016-07-03 09:09:35 Fil

Что делать, если действие является самой страницей? – user2896120

Как, например, 'localhost/index', где index - это сама страница, включите ее в действие. jquery получит пустой путь, если у вас его нет, и данные могут прибыть куда-нибудь. Оставляя действие пустым, только если нет jQuery – Fil

Как и все остальные, вам нужно добавить параметр data в ваш звонок $.ajax().

Ваш другой вопрос - чтение комментариев - это о том, как вы можете получить переменную PHP $message, чтобы отобразить без загрузки страницы.

Это, к сожалению, невозможно без обновления страницы, потому что PHP отображается на стороне сервера.

Что бы я предложил, создается другой файл PHP, который обрабатывает логику, которую вы пытаетесь создать, а затем с помощью AJAX, чтобы отбросить ответ на текущую страницу. Достижение того, что, как я считаю, вы хотите сделать.

Итак! Пример времени.

first.php

<!doctype html> 
<html> 
    <head><title>First</title></head> 
    <body> 
    <form id="myForm"> 
     <input name="email" type="email" /> 
     <button>Go!</button> 
    </form> 
    <div id="message"></div> 
    <script> 
     $('#myForm').on('submit', function(event){ 
     event.preventDefault(); 
     $.ajax({ 
      type: 'POST', 
      data: $().serialize(); // send the form data to.. 
      url: 'second.php',  // your new PHP page 
      complete: function(xhr, status){ 
      console.log('xhr', xhr); 
      console.log('status', status); 
      $('#message').text(status); 
      } 
     }); 
     }); 
    </script> 
    <body> 
</html>

second.php

<?php 
    if (isset($_POST["email"]) { 
    echo "Success!"; 
    } else { 
    echo "Error!"; 
    } 
?>

источник

2016-07-03 10:10:50 Labu

Ваш ответ очень понятен, но какова цель console.log ('xhr', xhr)? – user2896120

Кроме того, я сделал два файла, чтобы имитировать ваш пример, но кажется, что успех не echo'd out и не является ошибкой – user2896120

Цель 'console.log' заключается в том, что вы можете легко увидеть любой результат. Проверьте консоль вашего браузера, чтобы увидеть результат. Это не работает - только облегчает отладку, если все идет не так. Вы можете (и _should_) безопасно удалить его перед развертыванием кода для производства. – Labu

1- Ваш Ajax код: -

<script> 
    $(function() { 

     $(".article_information_form").on("submit", function(event) { 
      event.preventDefault(); 

      $.ajax({ 
       url: "process_page.php", 
       type: "post", 
       data: $(this).serialize(), 

       success: function(html) { 
        $('#msg').html(html); 
       } 
      }); 
     }); 
    }); 

</script>

2- Для печати AJAX ответ добавить следующее "d IV»под "тело" тега: -

##<div id='msg' ></div>

3- Создать PHP страницу "process_page.php", чтобы получить представленные данные, а затем отправить результат

<?php 
$numPages = $_POST['numPages']; 
echo $numPages; //anything you echo here will be displayed in the <div id='msg'> at the main page 
?>

удачи

источник

2016-07-03 15:42:03 Bufaroosha

Ajax Почтовый запрос не работает?

ответ

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