如何修改PHP / Jquery / Ajax脚本以具有多个表单字段

时间：2014-01-14 20:40:54

标签： javascript php jquery mysql ajax

我有一个php / Ajax / Jquery脚本，它将一个表单字段插入MySQL并在你点击提交时更新页面而不刷新。我希望脚本提交四个表单字段，而不只是一个。

我已经使用3个附加字段更新了数据库表add_delete_record： balance，account_number 和每月，以及已经存在的内容字段。< / p>

下面可能是代码过多，因为我只需修改几行，但我想这会回答所有问题。

这是php＆amp; html页面：

<div class="content_wrapper">
<ul id="responds">
<?php
//include db configuration file
include_once("config.php");

//MySQL query
$Result = mysql_query("SELECT id,content FROM add_delete_record");

//get all records from add_delete_record table
while($row = mysql_fetch_array($Result))
{
echo '<li id="item_'.$row["id"].'">';
echo '<div class="del_wrapper"><a href="#" class="del_button" id="del-'.$row["id"].'">';
echo '<img src="images/icon_del.gif" border="0" />';
echo '</a></div>';
echo $row["content"].'</li>';
}

//close db connection
mysql_close($connecDB);
?>
</ul>
<div class="form_style">
<textarea name="content_txt" id="contentText" cols="45" rows="5"></textarea>
<button id="FormSubmit">Add record</button>
</div>
</div>

这是它发布的php：

<?php
//include db configuration file
include_once("config.php");

//check $_POST["content_txt"] is not empty
if(isset($_POST["content_txt"]) && strlen($_POST["content_txt"])>0)
{

    //sanitize post value, PHP filter FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH
    $contentToSave = filter_var($_POST["content_txt"],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);

    // Insert sanitize string in record
    if(mysql_query("INSERT INTO add_delete_record(content) VALUES('".$contentToSave."')"))
    {
        //Record is successfully inserted, respond to ajax request
        $my_id = mysql_insert_id(); //Get ID of last inserted record from MySQL
        echo '<li id="item_'.$my_id.'">';
        echo '<div class="del_wrapper"><a href="#" class="del_button" id="del-'.$my_id.'">';
        echo '<img src="images/icon_del.gif" border="0" />';
        echo '</a></div>';
        echo $contentToSave.'</li>';
        mysql_close($connecDB);

    }else{
        //output error

        //header('HTTP/1.1 500 '.mysql_error());
        header('HTTP/1.1 500 Looks like mysql error, could not insert record!');
        exit();
    }

}
elseif(isset($_POST["recordToDelete"]) && strlen($_POST["recordToDelete"])>0 && is_numeric($_POST["recordToDelete"]))
{//do we have a delete request? $_POST["recordToDelete"]

    //sanitize post value, PHP filter FILTER_SANITIZE_NUMBER_INT removes all characters except digits, plus and minus sign.
    $idToDelete = filter_var($_POST["recordToDelete"],FILTER_SANITIZE_NUMBER_INT);

    //try deleting record using the record ID we received from POST
    if(!mysql_query("DELETE FROM add_delete_record WHERE id=".$idToDelete))
    {
        //If mysql delete record was unsuccessful, output error
        header('HTTP/1.1 500 Could not delete record!');
        exit();
    }
    mysql_close($connecDB);

}else{

    //Output error
    header('HTTP/1.1 500 Error occurred, Could not process request!');
    exit();
}
?>

这是JQuery 

$(document).ready(function() {
    //##### Add record when Add Record Button is clicked #########
    $("#FormSubmit").click(function (e) {

        e.preventDefault();

        if($("#contentText").val()==="") //simple validation
        {
            alert("Please enter some text!");
            return false;
        }

        var myData = "content_txt="+ $("#contentText").val(); //post variables

        jQuery.ajax({
            type: "POST", // HTTP method POST or GET
            url: "response.php", //Where to make Ajax calls
            dataType:"text", // Data type, HTML, json etc.
            data:myData, //post variables
            success:function(response){
            $("#responds").append(response);
            $("#contentText").val(''); //empty text field after successful submission
            },
            error:function (xhr, ajaxOptions, thrownError){
                alert(thrownError); //throw any errors
            }
        });
    });

    //##### Delete record when delete Button is clicked #########
    $("body").on("click", "#responds .del_button", function(e) {
        e.preventDefault();
        var clickedID = this.id.split("-"); //Split string (Split works as PHP explode)
        var DbNumberID = clickedID[1]; //and get number from array
        var myData = 'recordToDelete='+ DbNumberID; //build a post data structure

        jQuery.ajax({
            type: "POST", // HTTP method POST or GET
            url: "response.php", //Where to make Ajax calls
            dataType:"text", // Data type, HTML, json etc.
            data:myData, //post variables
            success:function(response){
            //on success, hide element user wants to delete.
            $('#item_'+DbNumberID).fadeOut("slow");
            },
            error:function (xhr, ajaxOptions, thrownError){
                //On error, we alert user
                alert(thrownError);
            }
        });
    });
});

这不是我的剧本，所以我想我也应该给出一个链接来表明它的作者： http://www.sanwebe.com/2012/04/ajax-add-delete-sql-records-jquery-php

3 个答案:

答案 0 :(得分：1)

我不是PHP专家，但这应该可以帮到你：

首先更改主页面上的表单区域：

<div class="form_style">
    <textarea name="content_txt" id="contentText" cols="45" rows="5"></textarea><br/>
    <input type="text" id="balance" /><br/>
    <input type="text" id="acctNum" /><br/>
    <input type="text" id="monthly" /><br/>
    <button id="FormSubmit">Add record</button>
</div>

然后你的myData看起来像这样：

var myData = {
    content_txt: $("#contentText").val(),
    balance: $("#balance").val(),
    acctNum: $("#acctNum").val(),
    monthly: $("#monthly").val()
};

以及后来的ajax回复：

$("#contentText").val(''); //empty text field after successful submission
$("#balance").val('');
$("#acctNum").val('');
$("#monthly").val('');

最后是PHP：

//sanitize post value, PHP filter FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH
$content = filter_var($_POST['content_txt'],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
$balance = filter_var($_POST['balance'],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
$account = filter_var($_POST['acctNum'],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
$monthly = filter_var($_POST['monthly'],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);


$qry= "INSERT INTO add_delete_record(content,balance,account,monthly) VALUES('".$content."','".$balance."','".$account."','".$monthly."')";


// Insert sanitize string in record
if(mysql_query("INSERT INTO add_delete_record(content,balance,account,monthly) VALUES('".$content."','".$balance."','".$account."','".$monthly."')"))
{
    //Record is successfully inserted, respond to ajax request
    $my_id = mysql_insert_id(); //Get ID of last inserted record from MySQL
    echo '<li id="item_'.$my_id.'">';
    echo '<div class="del_wrapper"><a href="#" class="del_button" id="del-'.$my_id.'">';
    echo '<img src="images/icon_del.gif" border="0" />';
    echo '</a></div>';
    echo $content.'</li>';
    mysql_close($connecDB);

}else{
    //output error

    //header('HTTP/1.1 500 '.mysql_error());
    header('HTTP/1.1 500 Looks like mysql error, could not insert record!');
    exit();
}

答案 1 :(得分：0)

这样的事情：

var myData = "content_txt="+ $("#contentText").val()+"&other_value"+ $("#foo").val(); //post variables

在php文件中：

$other_value = $_POST['other_value'];

UPDATE:

balance, account_number and monthly

JS:

var myData = "content_txt="+ $("#contentText").val()+"&balance"+ $("#balance").val();
myData = myData + "&account_number="+$('#acnum').val()+"&monthly="+$('#month').val();


PHP:

$content = filter_var($_POST['content_txt'],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
$balance = filter_var($_POST['balance'],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
$account = filter_var($_POST['account_num'],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
$monthly = filter_var($_POST['monthly'],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);


$qry= "INSERT INTO add_delete_record(content,balance,account,monthly) VALUES('".$content."','".$balance."','".$account."','".$monthly."')";

if(mysql_query($qry)){

答案 2 :(得分：0)

var myData = {
    content_txt: $("#contentText").val(),
    other_var: $("#anotherField").val()
};
jQuery.ajax({
    type: "POST", // HTTP method POST or GET
    url: "response.php", //Where to make Ajax calls
    dataType:"text", // Data type, HTML, json etc.
    data:myData, //post variables
    success:function(response){
        $("#responds").append(response);
        $("#contentText").val(''); //empty text field after successful submission
    },
    error:function (xhr, ajaxOptions, thrownError){
        alert(thrownError); //throw any errors
    }
});

这是发送多个字段的更简单方法（注意myData对象）。在PHP中，您可以检索并保存新变量，如下所示：

//check $_POST["content_txt"] is not empty
if(isset($_POST["content_txt"]) && strlen($_POST["content_txt"])>0 && !empty($_POST["other_var"])) // !empty() checks that the variable is set and not empty
{

    //sanitize post value, PHP filter FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH
    $contentToSave = filter_var($_POST["content_txt"],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
    $otherVarToSave = filter_var($_POST["other_var"],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);

    // Insert sanitize string in record
    if(mysql_query("INSERT INTO add_delete_record(content, other) VALUES('".$contentToSave."', '".$otherVarToSave."')"))
    {
相关问题
最新问题