如何将参数添加到Ajax调用post方法中

时间:2018-08-08 18:17:23

标签: jquery ajax

我有html,jquery和json。在我的示例中,我从一个简单的json和ajax调用中获取所有值。在此提交按钮时,我根据需要将文本框值传递给了我的ajax调用url。但是我使用了post方法。这是通过post方法传递参数的正确方法,还是我需要通过其他方式传递参数。这是下面的代码。

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
     <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
     </head>
     <div id="textbox">
     <input type="text" id="text1">
     </div><br>
     <div >
     <button type="button" id="submitbtn">submit</div>
     </div><br>
     <div id="critical">
     <span id="name1"></span> : <span id="value1"></span>
     </div>
     <div id="major">
     <span id="name2"></span> : <span id="value2"></span>
     </div>
     <div id="minor">
     <span id="name3"></span> : <span id="value3"></span>
     </div>

script.js

$(document).ready(function () {
     $("#submitbtn").click(function(){
     var x = $("#text1").val();
     alert(x);
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "1.json",
        data: { id : x },
        success: function(result) {
            $("#name1").text(result.critical[0].name);
            $("#value1").text(result.critical[0].value);

            $("#name2").text(result.major[0].name);
            $("#value2").text(result.major[0].value);

            $("#name3").text(result.minor[0].name);
            $("#value3").text(result.minor[0].value);
        }
    });
     });
});

1.json

{
    "critical": [{
        "name": "critical",
        "value": "50"
    }],
    "major": [{
        "name": "major",
        "value": "40"
    }],
    "minor": [{
        "name": "minor",
        "value": "20"
    }]
}

1 个答案:

答案 0 :(得分:0)

您可以使用data属性

$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "1.json?id="+x,
    data:{post_variable_name1:value1,post_variable_name2:value2},
    success: function(result) {
    }
});