ajax提交表单后刷新输入

时间:2013-08-04 06:01:48

标签: jquery ajax json

我搜遍了所有但无法找到如何通过js / jquery / ajax刷新特定的输入字段。

这是我在每个帖子上改变的输入:

<input type='hidden' id='nonce' name='nonce' value=''>
<input type='hidden' id='key' name='key' value=''>

我需要在ajax表单提交后刷新这些输入,任何想法?

更好的解释: 这个PHP代码生成随机哈希键。

<form action="#">

<?php $n->generateFormFields() ?>

</form>

我通过ajax POST发送这个生成的密钥,问题是当我将代码发送到ajax时,密钥在服务器端发生变化,所以在下次提交之后密钥会出错,因为它在ajax响应后没有改变,所以我需要在ajax提交/刷新上面的输入后刷新此代码。

编辑2:

我正在使用这个PHP脚本:

http://github.com/greatwitenorth/php-nonce

该脚本正在使用php POST,但我正在使用AJAX帖子,因此我需要以某种方式使用ajax刷新密钥。

编辑3:

表格ex:

<form action="#">

<?php $n->generateFormFields() ?>

</form>

上面的php函数正在创建Hashed键。 我通过ajax json POST发送的这些哈希密钥,在我发送之后,我验证密钥与数据库密钥相同。 - 如果确定继续,如果没有显示错误。 现在问题是每次提交表单时的关键更改。所以它改变但是在表单上的输入中,它没有改变,因为ajax没有刷新页面,因此它将发送与之前相同的键值。

2 个答案:

答案 0 :(得分:0)

由于您使用ajax返回值,请将新值保存为varibale,例如new_input,

然后简单地使用,

$("#target_input_id").val(new_input);

或者ajax调用中的.done()函数应该是,

.done(function ( data ) {
  $("#target_input_id").val(data); //assuming the php file only returns the value for input
});

由于您必须返回多个值, 看看这两个链接。

json - Jquery return undefined for multiple values in ajax call

How to return multiple values from JQuery AJAX call?

现在.done()就是,

.done(function ( data ) {
      $("#key").val(data.key); 
      $("#nonce").val(data.nonce);
    });

答案 1 :(得分:0)

.html文件

<!DOCTYPE html>

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
    $("#check").click(function(){
        $("#keyvalue").text($("#key").val());
    });
    $("#submit").click(function(){
    var text = $("#text").val();
    var key = $("#key").val();
        $.ajax({
            url: 'trial.php',
            data: {text: text, key:key},
            type: 'POST',
            dataType: 'json',
            success: function(data) {
                if(data.status == "fail"){
                    $("#status").html(data.message);
                }else{
                    $("#status").html(data.message);
                    $("#key").val(data.key);
                    $("#keyvalue").text('');
                }
            }
        });
        return false;
    });
 });
</script>
</head>
<body>
    <form method="post" action="trial.php" onsubmit="return send_form();">
        <input type="text" name="text" id="text"/>
        <input type="hidden" id="key" name="key" value="xsaigoehf7118191"/>
        <button id="submit">Send data and get new key</button>
    </form>
    <br><br>
    <div id="status"></div>
    <br><br>
    <button id="check">What's current value of key?</button> --------> <span id="keyvalue"></span>

    <div id="response"></div>
</body>

</html>

.PHP

<?php

//You get the form contents here.

$key = isset($_POST['key']) ? $_POST['key'] : "error";
$text = isset($_POST['text']) ? $_POST['text'] : "empty";

//Check them if it matches with DB's entry, if doesn't you set $key = "error";

if($key=="error"){
    $status = "fail";
    $message = "There was some error processing your form.";
    exit;
} else{

    //You generate another random key.
    $random ='';
    for ($i = 0; $i < 10; $i++) {
        $random .= chr(mt_rand(33, 126));
    }

    //Now here in steps save it to your DB. So that when next form is submitted you can match it.
    //And send back response to html file, where ajax will refresh the key.
    $status = "success";
    $message = "
    Your form was processed succesfully<br>
    The text you sent was ".$text.", and the key you sent was ".$key.".
    The new key sent to you can be seen by pressing the button below, has value, ".$random."<br><br>
    ";
    }

    echo json_encode(array("status" => $status, "message" => $message, "key" => $random));

?>

希望这会对你有所帮助。