javascript - 我们如何通过表单文本输入通过ajax发送json编码的数据

Question

我使用ajax获取php json编码数据，然后设置值以形成输入，然后将其发送到其他页面。但是，在正常输入值发布时，json 获取的值不会发布到其他页面。这是我正在使用的代码。我们将非常感谢您的帮助。 `

if(isset($_POST['send_mail'])){

header('Content-Type: application/json'); 
$out = array('a'=>"Volvo", 'b'=>"BMW", 'c'=>"Toyota");
echo json_encode($out);
//print_r($out);
exit();

}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function send_mail_test(){
var txt = $("#test_txt").val();

if( txt !=""){
$.ajax({
url : "chckvar.php",
type : "POST",
//async : false,
dataType: "JSON",
data : {
send_mail : 1,
txt_val : txt
},
success : function(data){

document.getElementById('code_r').setAttribute('value', data.a);

}    
});
 //return false;
}
else alert("please enter some text");
 //return false;

}
</script>
<form method="post" action="sub.php" name="myform" onSubmit="return send_mail_test()">
<input type="text" name="name"  id="test_txt">
<input type="text"  name="code_r" id="code_r">
<input type="submit" name="_mail" value="send" >
</form>`

sub.php

<?php
print_r($_POST);

?>

更新我正在另一种表单中使用 onclick 按钮，并尝试从那里更改操作页面，然后将表单提交给该操作，这可能吗？

<script>
function action(){
var str = location.href;
 var x = "feedback.php?page="+str;
$("#quick_query").attr("action", x);
 $('#quick_query').submit();
}
</script>
<form id="myform" method="post" action="">
<input type="button" onclick="action()">
</form> 

它正在更改操作但不提交表单？我怎样才能实现它，这将有很大的帮助。

Answer 1

答案已更新:

您的代码的问题是提交事件甚至在调用 ajax 之前就发生了。您的代码已进行以下更改

HTML

<form method="post" action="sub.php" name="myform" id="myform">
    <input type="text" name="name"  id="test_txt">
    <input type="text"  name="code_r" id="code_r">
    <input type="button" name="_mail" value="send" onclick="return send_mail_test()" >
</form>

    <br><hr><br>
<form method="post" action="xyz.php" name="anotherform" id="anotherform">
    <input type="button" name="change" value="Change action of above form" onclick="changeformaction();" >
</form>

表单上的 onsubmit 被删除，提交按钮更改为普通按钮。现在在“发送”按钮上调用 send_mail_test() 函数。

JavaScript

<script>
    function send_mail_test() {
        var txt = $("#test_txt").val();
        if (txt != "") {
            $.ajax({
                url : "chckvar.php",
                type : "POST",
                //async : false,
                dataType : "JSON",
                data : {
                    send_mail : 1,
                    txt_val : txt
                },
                success : function(data) {
                    $('#code_r').val(data.a);
                    $('#myform').submit();
                }
            });
        }else{
            alert("please enter some text");
            return false;
        }
    }
function changeformaction(){
   $("#myform").prop('action','newaction.php');
   $('#myform').submit();
}
</script>

这里对ajax成功回调做了一个小改动，收到响应并在输入中设置值后，然后提交表单。

您的 ajax 文件无需更改。