Как отправить данные с помощью AJAX - PullRequest
Новая
       6

Как отправить данные с помощью AJAX

0 голосов
/ 18 сентября 2018

Мой вопрос / проблема заключается в том, как отправить данные из формы с помощью JSON на страницу PHP.Я пробовал несколько методов, но по какой-то причине это не работает.Я считаю, что я отправляю данные неправильно, и поэтому я не могу получить данные на странице PHP.

Это код на моей странице входа (использует HTML и JavaScript): 

<!DOCTYPE html>
<html>
<body>
<h2>UserName and Password</h2>
<form ID = "PassUser">
	Enter UserName:
	<input type="text" id="username" >
	Enter Password:
	<input  type="password" id="password">
	<br><br>
	<input type="submit" value = "Submit" onclick = "submit_form()">
	</form>
	<script>
		function submit_form() {
			var user = document.getElementById("username").value;
			var pass = document.getElementById("password").value;
			var data = {}
			data.uname = user;
			data.upass = pass;			
			alert(data.uname);
			alert(data.upass);
			var json_data = JSON.stringify(data);
			alert(json_data);
			var json_upload = "json_name=" + json_data;
			var request= new XMLHttpRequest();
			request.open("POST", "test-middle.php");
			request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			request.send(json_upload);
			};
	</script>
			
</body>
</html>

Это код на странице php: 

<?php
$data = $_POST["json_name"];
var_dump($data);
echo $data;
?>

Результат var_dump равен NULL.

Мне нужна помощь с попыткой выяснить, почему я не получаю данные на странице PHP.Если способ отправки данных правильный (не думаю, что это так), или если способ получения данных правильный?Я также попытался json_decode() и file_get_content(), оба привели к NULL.Я пытался выяснить все это некоторое время, и это не предполагалось так долго.

Кроме того, дополнительные строки кода, такие как предупреждения, просто для меня, чтобы проверить, проходили ли данные формы черезJavaScript правильно / вообще.

Кроме того, подумал процесс, как я это делал: получить данные формы и вставить их в объект.Затем используйте JSON.stringify (объект).Затем отправьте его на страницу PHP.Что касается страницы PHP, я просто хотел получить данные и вывести их или var_dump, просто чтобы проверить, получил ли я их.

Кроме того, не использую JQuery.Спасибо, T Спасибо

Редактировать 1: изменил json_data на json_name.Все еще выводит NULL.

1 Ответ

0 голосов
/ 18 сентября 2018

РЕДАКТИРОВАТЬ: Хорошо, у меня все получилось, в вашем HTML-файле вам нужно изменить 

<input type="submit" value = "Submit" onclick = "submit_form()">

на 

<button onclick="submit_form()">Submit</button>

Кроме того, вы 'Файл PHP пытается вернуть некоторые данные, но ваш JavaScript не был запрограммирован для их принятия.

Вам необходимо добавить часть request.onreadystatechange, чтобы гарантировать, что информация возвращается из файла PHP после того, какзапрос был выполнен.Именно в этой функции вы хотите построить процессы, которые должны произойти после нажатия кнопки отправки.

Вам необходимо создать элемент в файле HTML для отображения ответа.Я создал элемент <div> с id='response'.Вы должны использовать идентификатор этого нового элемента, чтобы сообщить JavaScript, куда поместить ответ из сценария PHP.

Поэтому я отредактировал ваш HTML-файл, чтобы он выглядел так: 

<!DOCTYPE html>
<html>
<body>
<h2>UserName and Password</h2>
<form ID = "PassUser">
    Enter UserName:
    <input type="text" id="username" >
    Enter Password:
    <input  type="password" id="password">
    <br><br>
    <button onclick="submit_form()">Submit</button>
    </form>
  <div id='response'>
    <!-- THIS IS THE RESPONSE -->
  </div>
    <script>
     function submit_form() {
      var request = new XMLHttpRequest();
      var user = document.getElementById("username").value;
      var pass = document.getElementById("password").value;
      var data = {};
      data.uname = user;
      data.upass = pass;
      alert(data.uname);
      alert(data.upass);
      var json_data = JSON.stringify(data);
      alert(json_data);
      var json_upload = "json_name=" + json_data;
      request.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
            document.getElementById("response").innerHTML = this.responseText;
          }
        };
      request.open("POST", "test-middle.php", true);
      request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      request.send(json_upload);
}
    </script>


</body>
</html>

После этого, пока ваш PHP-файл хранится в той же папке, он должен работать.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...