如何在HTML页面上显示来自PHP的响应？

Question

I have a text field and a button on the HTML page. 我在HTML页面上有一个文本字段和一个按钮。 There is also a para tag which will display the error on validation. 还有一个para标签，它将在验证时显示错误。

If the field is empty it will be changed to Name must be filled out 如果该字段为空，则将其更改为Name must be filled out

and it is changing to that on validation. 并正在更改为验证。

Now when I input a string and press the submit button....the value should be passed to PHP page and check the condition and print the message accordingly on the HTML page...but when I click submit the message is printed out on the index.php page itself. 现在，当我输入一个字符串并按下提交按钮时。...该值应传递到PHP页面并检查条件并在HTML页面上相应地打印消息...但是当我单击“提交”时，该消息就会打印在index.php页面本身。

How should I use the AJAX code so it prints the message on the para tag with id error? 我应该如何使用AJAX代码，以便将消息在id标记为para的错误消息上打印出来？

Please Help. 请帮忙。 Thanks in advance. 提前致谢。

HTML CODE HTML代码

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">    </script>
    <script type="text/javascript" src="java123.js"></script>
  </head>
  <body>
    <form action="index.php" method="post" onsubmit="return validateForm()">
      <input type="text" name="name" id="name">
      <input type="submit">
    </form> 
    <p id="error"></p>
  </body>
</html>

PHP CODE PHP代码

   <?php
   $name = $_POST['name'];
   if($name == "thistext"){
       $arr = array("sth"=>"hello");
       echo json_encode($arr);
   }else{
       $arr = array("sth"=>"User does not exist");
       echo json_encode($arr);
   }
   ?>

JAVASCRIPT CODE JAVASCRIPT代码

var invalid = 0;

function validateForm() {

/* WHERE SHOULD I PUT THIS CODE
    $.ajax({
      url: "index.php",
      type: "POST",
      dataType: "json",
      success: function(response) {
         $("#error").html(response.sth);
      }
    });

 */

    invalid = 0;

    name = document.getElementById("name").value;
    if(name == ""){
      document.getElementById('error').innerHTML = "Name must be filled out";
      invalid = 1;
    }else{
      document.getElementById('error').innerHTML = "";
    }

    if(invalid != 0){
      return false;
    }else{
      return true;
    }
 }

Answer 1

 function validateForm() {

    invalid = 0;

    name = document.getElementById("name").value;

    if(name == ""){
        document.getElementById('error').innerHTML = "Name must be filled out";
        invalid = 1;
    }else{
        document.getElementById('error').innerHTML = "";
    }

    if(invalid != 0){
    $.ajax({
    url: "index.php",
    type: "POST",
    dataType: "json",
    success: function(response) {
        $("#error").html(response.sth);
    },
error: function(data){
            console.log("error");
            console.log(data);
        }
    });
    }
    }

Answer 2

try this 尝试这个

function validateForm() {

    var name = $('name').value;

    if(name == ""){
        $('error').innerHTML = "<b>Name must be filled out</b>";

        // you need to send data also
        $.ajax({
            url: "index.php",
            type: "POST",
            dataType: "json",
            data: { 'name': name },
            success: function(res) {
               // $("#error").html(res.sth);
                console.log(res);
            },  
            error: function(err){
                console.log(err);
            }
        });

    }else{
        $('error').innerHTML = "";
    }

   /* Always return false because this will prevent actual form submit.
      You are submitting form with ajax. 
   */
   return false

}

如何在HTML页面上显示来自PHP的响应？

问题描述

2 个解决方案

解决方案1
1 2016-08-21 09:31:26

解决方案2
0 2016-08-21 09:51:19

如何在HTML页面上显示来自PHP的响应？

问题描述

2 个解决方案

解决方案1 1 2016-08-21 09:31:26

解决方案2 0 2016-08-21 09:51:19

解决方案1
1 2016-08-21 09:31:26

解决方案2
0 2016-08-21 09:51:19