我們如何通過表單文本輸入通過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 on按鈕，並嘗試從那里更改操作頁面，然后將表單提交給該操作是可能的嗎？

<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之前，submit事件也會發生。 您的代碼已完成以下更改

的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文件無需更改。

Answer 2

嘗試這個：

<script>
$(function () {
    $('form[name="myform"]').on('submit', function (e) {
        e.preventDefault();
        var txt = $(this).find("#test_txt").val();

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

                    $('#code_r').attr('value', data.a); //$('#code_r').val(data.a);
                    $(this).submit()
                }
            });
        } else alert("please enter some text");


    });
});
</script>
<form method="post" action="sub.php" name="myform">
<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>