0

我有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
}
?>

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

~ 谢谢帮忙

4

6 回答 6

3

尝试这个

      $("#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(); }

           }
       });
于 2013-10-16T20:59:45.153 回答
3

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

这是一种通过从服务器响应 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 中轻松分析。

于 2013-10-16T21:06:53.443 回答
2

The hard part as it stands is going to be determining whether the output is valid or represents an error. Unless you hard code those messages into your client it's going to be tricky.

What you probably want to do is use HTTP response codes in your PHP and return some kind of error code (maybe 500?) if there is an error.

Then, you can use error handling on your client and detect whether it is a success or not. JQuery's ajax method will automatically detect this and call the success or error callbacks accordingly.

于 2013-10-16T20:53:37.117 回答
2

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

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

于 2013-10-16T20:52:57.297 回答
1

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

  $('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.

  });
于 2013-10-16T20:59:25.813 回答
1 
$('#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();}

  }
 })

})
于 2013-10-16T21:12:54.113 回答