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

试试这个

      $("#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 2

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

这是通过从服务器响应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 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();}

  }
 })

})

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

6 个答案: