Question

我想从另一台服务器xyz.com上为我的html页面获取一个json文件（此处不写原始网站名称以确保安全），但是问题是website xyz.com仅支持http post request。为了检查我的html代码是否工作正常，我使用http get method并将json数据上传到支持http get request的另一个站点上。我发现它工作正常。但是当我尝试post method时它不工作。您能帮我吗

我目前正在使用并且工作正常

<script>

   $(function() {


  var people = [];

  $.get('https://api.myjson.com/bins/c307c',function(data) {
      $.each(data.video, function(i, f) {

用于xyz.com的HTML代码，它还返回一个.json文件

<html>

<head>


<form action="https://www.xyz.php" method="POST" >
<div class="container" style="width:100%;">
<center></center>
</div>
  <div class="container" style="width:100%;">
    <label for="userId"><b>UserId</b></label>
    <input type="number" placeholder="Enter Your User Id" name="userId" autofocus required>

    <label for="Passkey"><b>Passkey</b></label>
    <input type="number" placeholder="Enter Passkey" name="Passkey" required>

    <button type="submit" >GET Json File From Server</button>
  </div>
</form>

这是我尝试过的但不起作用

<script>

   $(function() {


  var people = [];

  $.post('https://xyz.php', usedId=5&passkey=55, function(data) {
      $.each(data.video, function(i, f) {

Answer 1

尝试这种方式的代码

$.post( "https://xyz.php", { usedId: 5, passkey: 55},
function(data) {
        //your code
 } );

Answer 2

我建议进行一些更改：

提供表单ID，在这种情况下，login似乎是一个合适的ID
标准化表单字段的大写字母

这里有一些代码可以帮助您入门。您会注意到我两次创建了data。确定是要手动构建数据还是使用jQuery的序列化为您完成数据。由于这是一种简单的形式，因此后者可能很好。

我也正从表单中获取AJAX终结点，因此您不必在那儿重复。

// when the document has loaded...
$(document).ready(function () {
    // if the user is already logging in
    var login = false;

    // when the form is submitted...
    $('#login').on('submit', function (event) {
        // block the form if it's already been submitted
        if (login) {
            event.stopPropagation();
            event.preventDefault();
            return;
        }

        // lock the form
        login = true;

        // get a handle on the form
        // I use $ as a prefix to differentiate jQuery objects
        // currentTarget is the subject of the event
        var $form = $(event.currentTarget);

        var url = $form.prop('action');

        /*
         * MANUAL
         */
        // form fields are added to the form object as properties by name attribute
        // note that they are not jQuery objects
        var data = {
            userId: $form.userId.value,
            passKey: $form.passKey.value
        };

        /*
         * AUTOMATIC
         */
        // uses jQuery's form serialization to automatically create an object mapping names to values
        var data = $form.serialize();

        $.post(url, data)
            // on success
            .done(function (data, status, request) {
                $.each(data.video, function (i, f) {
                    var link = "https://www.youtube.com/embed/"+ f.video;

                    // backslash at the end of a string means to continue the string on the next line
                    var $row = $('<tr>\
                        <td>' + f.videoName + '</td>\
                        <td>' + f.date + '</td>\
                        <td>' + f.time + '</td>\
                        <td>' + f.liveStatus + '</td>\
                        <td><a target="_blank" href="' + link + '">' + link + '</a></td>\
                    </tr>');

                    $row.appendTo('#userdata tbody');
            })
            // on failure
            .fail(function (request, status, error) {
                window.alert('Failed with a status of ' + status + ': ' + error);
            })
            // executes after either of the above
            // parameters are inconsistent and use either done's or fail's
            .always(function () {
                // do cleanup, i.e. unlock form submission, close modal dialogs, etc.
                login = false
            });

        // stop default form submission
        event.stopPropagation();
        event.preventDefault();
    });
});

Answer 3

请进行必要的更改，以便在我单击按钮时从服务器获取数据并以表格格式显示

<html>
<head>

<form action="https://xyz.php" method="POST" >
<div class="container" style="width:100%;">
<center></center>
</div>
  <div class="container" style="width:100%;">
    <label for="userId"><b>UserId</b></label>
    <input type="number" placeholder="Enter Your User Id" name="userId" autofocus required>

    <label for="passKey"><b>Passkey</b></label>
    <input type="number" placeholder="Enter Passkey" name="passKey" required>

    <button type="submit" >GET DATA</button>
  </div>
</form>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>

<script>

   $(function() {


  var people = [];

 $.post( "xyz.php",function(data) {
      $.each(data.video, function(i, f) {

        var link = "https://www.youtube.com/embed/"+ f.video;       
         var tblRows = "<tr>" +
          "<td>" + f.videoName + "</td>" + "<td>" + f.date + "</td>" + "<td>" + f.time + "</td>"  +
          "<td>" + f.videoDuration + "</td>" + "<td>" + f.liveStatus + "</td>" + "<td><a target='_blank' href='"+link+"'>"+link+"</a></td>" + "</tr>";
          $(tblRows).appendTo("#userdata tbody");

    });

  });

});
</script>

</head>


<body>

<div class="wrapper">
<div class="profile">
   <table id= "userdata" width="50%" border="2">
  <thead>
            <th>VIDEO NAME</th>
            <th>DATE</th>
            <th>TIME</th>           
            <th>DURACTION</th>
            <th>LIVE STATUS</th>
            <th>LINK</th>
        </thead>
      <tbody>

       </tbody>
   </table>

</div>
</div>
</div>
</html>

JSON使用后方法获取数据

3 个答案: