Ajax不会将表单数据发布到PHP脚本

时间:2013-09-02 20:38:18

标签: php javascript jquery html ajax

我得到了一个表格,其中包含一些需要发送的数据,我想用ajax来完成。我有一个功能,响应按钮的onclick事件。当我点击按钮时,我在firebug中获得了一些帖子数据,但它没有达到我的PHP脚本。有谁知道什么是错的?

JS:

function newItem() {
var dataSet = $("#createItem :input").serialize();


confirm(dataSet); //Below this code box is the output of this variable to check whether it is filled or not

    var request = $.ajax({
        type: "POST",
        url: "/earnings.php",
        data: dataSet,
        dataType: "json"
    });

    request.done(function(){
        $('.create_item').children(".row").slideUp('100', 'swing');
        $('.create_item').children("h2").slideUp('100', 'swing');
        confirm("succes");
    });

    request.fail(function(jqXHR, textStatus) {
        confirm( "Request failed:" + textStatus );
    });
}
完全填写表单时的

dataSet结果: id=123&date=13-09-2013&amount=5&total=6%2C05&customer=HP&invoicenumber=0232159&quarter=1&description=Test

PHP:

<?php 

    include('includes/dbconn.php');

    function clean_up($string){
        $html = htmlspecialchars($string);
        $string = mysql_real_escape_string($html);
        return $string;
    }

    if($_POST){

        $date = clean_up($_POST['date']);
        $amount = clean_up($_POST['amount']);
        $total = clean_up($_POST['total']);
        $customer = clean_up($_POST['customer']);
        $invoicenumber = clean_up($_POST['invoicenumber']);
        $quarter = clean_up($_POST['quarter']);
        $description = clean_up($_POST['description']);

        $sql = ("INSERT INTO earnings (e_date, e_amount, e_total, e_customer, e_invoicenumber, e_quarter, e_description) 
            VALUES ($date, '$amount', '$total', '$customer', $invoicenumber, $quarter, '$description')");
        echo $sql;
        if($mysqli->query($sql) === true){
            echo("Successfully added");
        }else{
            echo "<br /> \n" . $mysqli->error;
        }
    }
?>

表单在没有ajax的情况下工作正常,但是它只是不起作用。

感谢您的帮助!

3 个答案:

答案 0 :(得分:1)

尝试使用此代码段代码...

<form id="F_login">
    <input type="text" name="email" placeholder="Email">
    <input type="password" name="password" placeholder="Password">
    <button id="btn_login" type="submit">Login</button>
</form>

$("#btn_login").click(function(){
    var parm = $("#F_login").serializeArray();
    $.ajax({
        type: 'POST',
        url: '/earnings.php',
        data: parm,
        success: function (data,status,xhr) {
            console.info("sukses");
        },
        error: function (error) {
            console.info("Error post : "+error);
        }
    });
});

如果你试试这个,请回复我......

答案 1 :(得分:0)

阻止您的表单提交并使用这样的ajax:

<form id="createItem">
<input id="foo"/>
<input id="bar"/>
<input type="submit" value="New Item"/>
</form>

$('#createItem).on("submit",function(e){
e.preventDefault;
newItem();
});

答案 2 :(得分:0)

试试这个

<input type="text" id="foo"/>
<input type="text"  id="bar"/>
<input type="button" id="btnSubmit" value="New Item"/>


<script type="text/javascript">
    $(function() {
$("#btnSubmit").click(function(){
try
  {
    $.post("my php page address",
      {
         'foo':$("#foo").val().trim(),
         'bar':$("#bar").val().trim()
     }, function(data){
           data=data.trim();
      //   alert(data);
// this  data is data that the server sends back in case of ajax call you 
//can send any type of data whether json or json array or any other type 
//of data

         });
    }
    catch(ex)
    {
        alert(ex);
    }
  });


});
</script>