使用ajax提交表单并隐藏成功

Question

我有form 我应该提交name 和suffix 如何使用ajax 到send data to php file 将检查它，如果有错误将发送回错误，如果没有错误将提交它并发送回成功消息，表单将隐藏。

HTML 表单代码

<script type="text/javascript" src="jquery.min.js"></script>

<form id="myform" name="myform">
Name : <input type="text" name="name" id="name"/>
<br />
Suffix : <input type="text" name="suffix" id="suffix"/>
<br />
<input id="Submit" type="submit" name="Submit" value="thanks" />
</form>

这应该将信息提交到以下PHP文件以进行检查并显示结果

PHP 代码

<?PHP
require_once("config.php"); // db connection

$name = $_POST['name'];
$suffix = $_POST['suffix'];

if(empty($suffix) || empty($name) ){

echo "All input are needed"; // this error

} else if($name == 'john') {

echo "sorry john not here"; // this error

} else {

$qry="select * from users where username='$name'";
$result=mysql_query($qry) or die($qry);
$line=mysql_fetch_array($result);

echo $line['email']; // this success
}
?>

我也想知道它是否通过并发送成功消息可以隐藏输入表单

~感谢帮助

Answer 1

正如一些答案所说，您可以避免使用表单。

这是一种通过从服务器响应 JSON 来实现您想要的方法。

HTML：

<div id="myform" name="myform">
    Name : <input type="text" name="name" id="name"/>
    <br />
    Suffix : <input type="text" name="suffix" id="suffix"/>
    <br />
    <button id="Submit" type="button">thanks</button>
</div>

我把form标签变成div，把submit标签变成button。

Javascript：

<script>
$(function() {
    // The url where the data will be submitted to
    var url = '/submit/url';

    $('#Submit').on('click', function() {
        $.ajax({
            url: url,
            // Take values from form inputs
            data: {
                name:   $('#name').val(),
                suffix: $('#suffix').val()
            }
        }).done(function(r){
            if (r.success) {
                // success.
                // hide form container, alert email.
                $('#myform').hide();
                alert(r.email);
            } else {
                // else, there was an error
                alert(r.error);
            }
        });
    }
});
</script>

单击按钮后，将执行 Ajax 请求，完成后，将分析 JSON 响应。

最后是 PHP：

<?php
require_once("config.php"); // db connection

$name   = $_POST['name'];
$suffix = $_POST['suffix'];

if (empty($suffix) || empty($name)) {
    $resp = array('error' => "All input are needed"); // this error
} elseif ($name == 'john') {
    $resp = array('error' => "sorry john not here"); // this error
} else {
    $qry="select * from users where username='$name'";
    $result=mysql_query($qry) or die($qry);
    $line=mysql_fetch_array($result);

    // this success
    $resp = array(
        'success' => true,
        'email'   => $line['email']
    );
}

// Set content type to JSON and output the array, JSON-encoded.
header('Content-type: application/json');
echo json_encode($resp);

请求将输出一个 JSON 对象，该对象可以包含任意数量的数据，并且可以在 Javascript 中轻松分析。

Answer 2

试试这个

      $("#myform").submit(function(e){
      e.preventDefault();
      var name=$('#name').val();
      var suffix=$('#suffix').val();

      $.ajax({
        type:"POST",
        url: 'script.php',
        data: 'name='+name+'&suffix='+suffix,
        cache: false,
        success:function(html)
          {
            if($.trim(html)=='Your error condition')
            { //do something }

           else { $('#myform').hide(); }

           }
       });

Answer 3

为了发送 ajax 请求，您不想使用标准表单提交。相反，您希望使用 XHR 将名称和后缀值发送到服务器。大多数 javascript 库都提供了一种创建 ajax 调用的简单方法。您可以尝试 JQuery 并使用它的 $.ajax() 函数。此方法接受 OnSuccess 回调，您可以使用该回调在 ajax 调用成功返回后隐藏表单。您可以在 JQuery 网站上查看有关如何执行此操作的文档。

http://api.jquery.com/jQuery.ajax/

Answer 4

目前最困难的部分是确定输出是有效的还是表示错误。除非您将这些消息硬编码到您的客户端中，否则会很棘手。

您可能想要做的是在您的 PHP 中使用 HTTP response codes 并在出现错误时返回某种错误代码（可能是 500？）。

然后，您可以在客户端上使用错误处理并检测它是否成功。 JQuery's ajax 方法会自动检测到这一点并相应地调用成功或错误回调。

Answer 5

我会使用这样的东西，并用你的陈述修改它。希望这能让您朝着正确的方向前进。

  $('FORM-ID').submit(function(event) {

    var form = $(this);
    $.ajax({
      type: form.attr('method'),
      url: form.attr('action'),
      data: form.serialize()
    }).done(function() {
       // On Success
    }).fail(function() {
      // On Fail
    });
    event.preventDefault(); // Prevent the form from submitting via the browser.

  });

Answer 6

$('#myform input#submit').on('click',function(e){

  e.preventDefault();

  var data={}

  $('#myform').find('[name]').each(function(index, value){

    var that=$(this);
    var name=that.attr('name');
    var value=that.val();
    data[name]= value;

 });

 $.ajax({

  url: 'myfile.php',
  data: data,
  type: 'POST',
  success: function(response)
  {
     if(response=="All inputs are needed")
     {
        alert(response);
     }

     else if(response=="Sorry John not here")
     {
        alert(response);
     }

     else{ alert("email is "+response); $('#myform').hide();}

  }
 })

})