Javascript 如何使用ajax/jquery在弹出表单框中显示php错误消息而不刷新页面

我是网络开发新手。我有一个html页面，点击注册按钮后会出现一个弹出的注册表单。在此注册表中，我使用Php regProcess.Php页面验证所有错误。在html表单中，我设置action attribute=regProcess.php，以便。它正在验证该php页面的表单，并在同一页面上显示错误消息。但是我想在这个弹出的html表单上显示所有php错误消息。我不知道该怎么做。你能给我一个解决方案或者告诉我如何做这项工作吗

Html格式：

Php页面：

---

您可以使用ajax实现这一点：

$(document).on('submit', '#form1', function(e){ // event delegation way to submit
   e.preventDefault(); // stops the form to submit.
   var $this = $(this);
   $.ajax({
       url: $this.attr('action');
       type: $this.attr('method');
       data : $this.serialize(); // sends the data to your php
       success: function(data){
         $('body').append(data); // this will append your error div
       },
       error: function(xhr){
         console.log(xhr.responseText);
       }
   });
}); // end submit.

要在表单上显示错误，您必须为此编写一些css，如：

.error{
  width:400px;
  height: 300px;
  padding:10px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -150px 0 0 -200px; /* <--to center the div use half of width/height*/
  z-index: 99999; // put this higher to show above all elems on page.
}

---

有很多，所以很难给你所有的代码，让你的方式。最好教你在哪里钓鱼，所以如果你打开谷歌标签。按优先顺序：

研究如何编写存储过程。它们听起来比实际情况更可怕，但总比让每个人都登录到你的数据库要好。另一种选择是使用类似Laravel的框架。它们通常为您提供了保证数据安全的方法，而不会像从头开始那样让您头疼。不利的一面是，它们迫使您学习如何将代码分离成一些不会随着复杂性的增加而压倒您的东西。有时，根据你的风格，用艰苦的方式学习会更好。 2.将php一分为二，就好像您在为两个完全不同的浏览器编写代码一样。您现在拥有的一个采用表单信息并用HTML响应。您还没有创建的表单采用表单信息，并用JSON响应。这是另一个吓人的词，但JSON比HTML简单得多。因为您的用户实际上不必查看它，所以您不必担心它的样式。您不必担心语法，因为php有json_encode，它可以为您完成这一部分。它所需要的只是常规数组和对象，并将它们转换为JSON。您的php如何知道返回哪个，HTML还是JSON？这取决于哪个浏览器需要它。我会解释的

将JavaScript放在表单中，以便在这个php处理程序之间来回对话。它也将表单作为JSON发送，并侦听JSON作为返回。它覆盖了您的“提交”按钮，并显示您留在这里的网页。让我来处理这件事。这就像在你的巨大而缓慢的浏览器中有一个微型浏览器。当它与处理程序完成对话后，它决定如何使用回调函数，回调函数通常以红色突出显示内容，显示错误/成功消息，告诉大型浏览器启动并移动到另一个页面，等等。这就是他们所说的AJAX，也就是异步JavaScript。这只是说小浏览器能够独立于大浏览器工作的一种奇特方式

---

希望这能让您走上正轨。

@Jai我如何使用ajax，如何在这个html弹出表单上显示错误消息？@Babu好的！但是您要将错误响应放在哪里。我要将所有错误消息放在html表单上方。你知道这个表单是弹出式表单。现在点击注册按钮后，它会转到另一个页面并显示错误消息。好的，这个表单是动态生成的还是一个javascript弹出式表单？我用它作为弹出框。

$(document).on('submit', '#form1', function(e){ // event delegation way to submit
   e.preventDefault(); // stops the form to submit.
   var $this = $(this);
   $.ajax({
       url: $this.attr('action');
       type: $this.attr('method');
       data : $this.serialize(); // sends the data to your php
       success: function(data){
         $('body').append(data); // this will append your error div
       },
       error: function(xhr){
         console.log(xhr.responseText);
       }
   });
}); // end submit.

.error{
  width:400px;
  height: 300px;
  padding:10px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -150px 0 0 -200px; /* <--to center the div use half of width/height*/
  z-index: 99999; // put this higher to show above all elems on page.
}