Question

我是Web应用程序的新手，不知道如何在客户端（Web页面）上显示如何从服务器实现反馈。

我正在尝试实现服务器端验证，即将信息发送到服务器并使用PHP进行验证。

如果验证失败，则将响应发送回客户端，刷新包含Web表单的页面并显示反馈。（我已经实现了客户端验证，现在想在服务器端实现）。

我的困难是

（1）如何将信息从服务器发回客户端？

（2）表格刷新并显示反馈。

有link中的信息，但没有提供适当的解决方案。

只是一个线索或直接的解决方案非常高兴，因为我是Web应用程序的初学者。

由于

Answer 1

如果要将数据发送到要验证的外部脚本，请使用Ajax发送请求。处理数据然后回显您将在Ajax请求中返回的响应/状态。从那里，您可以使用JavaScript来处理响应并更新页面。

formpage.html

<form id="form">
    <input name="email" type="email"/>
    <input name="persons_name" type="text"/>
    <input name="password" type="password"/>
    <input type="submit" value="submit"/>
</form>

//JQuery
<script type="text/javascript">
jQuery("#form").on("submit", function(e){

    //This stops the form from submitting how it regularly would
    e.preventDefault();

    jQuery.ajax({
        url: "http://yoursite/path/to/phpfile.php",
        type: "POST",
        data: jQuery('#form').serialize(), /*grab all elements in your form and serialize them */
        onSuccess:  function(data){

           // I put this here so you can see data sent back in you console
           console.log(data);

           if(data.error == false){
              //validation was successfull
           }else if(data.error == true){
              //validation failed handle errors
           }
        },
        onError: function(){
           // the AJAX request failed as in timed out / bad url etc.
        } 
    });
});
</script>

phpfile.php

<?php
$data = array();
$data['error'] = false;

//if persons name is not set or does not have a value    
if(!isset($_POST['persons_name']) || empty($_POST['persons_name'])){ 

    $data['error'] = true;
    $data['message'][] = 'You have to have a name!';
}

//if password is set
if(isset($_POST['password']) && !empty($_POST['password'])){

   //validate password logic goes here

   if(!valid){  /*if its not valid*/
       $data['error'] = true;
       $data['message'][] = 'You password sucks!';
   }
}else{ /* password was not set */
    $data['error'] = true;
    $data['message'][] = 'What the heck you didn\'t add a password';
}

//if email is set
if(isset($_POST['email']) && !empty($_POST['email'])){

      //validate email logic goes here

    if(!valid){
        $data['error'] = true;
        $data['message'][] = 'Thats NOT an email address',
    }
}else{
    $data['error'] = true;
    $data['message'][] = 'Email address is required'
}

//optional
if(!$data['error']){
     // If there are no errors you can do something with your values here such as save them to a database etc.
}


// then echo the $data array you have built as JSON to use in jquery. 
//This will be what is returned in your AJAX request
echo json_encode($data);
?>

有更多逻辑方法来构建验证，我在这里使用jQuery因为...我喜欢jQuery，但这至少显示了如何访问这些值。有效和！有效显然不是真正的运算符，需要替换，但是你想检查每个参数的验证。此外还有更多的内容需要进行验证，例如清理，但这会让您开始使用这两个文件。 $ data只是一个可以包含任何内容的数组。 $ data ['error']键和值是ajax调用中onSuccess函数用来确定验证是否成功以及$ data ['message'] []构建一大堆消息的内容。为每条消息提供一个唯一的密钥可能更有用，这样你就可以用javascript（例如$ data ['message'] ['email'] =等更好地解析它...最后一件事让我感觉良好通过ajax进行表单验证的日子是OnSuccess并不意味着验证成功。它只是意味着消息已成功发回。 On Error表示您遇到了诸如404或500错误之类的http错误。

服务器端表单验证和返回消息

1 个答案: