Question

如何组合脚本1和脚本2以实现发送数据和一个脚本的目标。

想法是在发送帖子的任何时候获得新鲜内容。我在Framework7中使用它。这两个脚本在其角色中已经很好地发布或检索数据。

这是从后端获取/获取数据的脚本。

脚本1

<script type="text/javascript">
    $(document).ready(function() {
        var url = "http://localhost/integration/json.php";
        $.getJSON(url, function(result) {
            console.log(result);
            $.each(result, function(i, field) {
                var comment = field.comment;
                var user = field.user;
                var post_time = field.post_time;
                $("#listview").append("<tr class='even gradeA' width = '30px'><td>"+comment+"</td><td>"+user+"-"+post_time+"</td></tr>");
            });
        });
    });
</script>

脚本2
脚本2的作用是将数据发布到服务器。

<script type="text/javascript">
    $(document).ready(function() {
            $("#insert").click(function() {
                var comment = $("#comment").val();
                var user = $("#user").val();
                var ip = $("#ip").val();
                var dataString = "comment=" + comment + "&user=" + user + "&ip=" + ip + "&insert=";
                if ($.trim(comment).length > 0 & $.trim(user).length > 0 & $.trim(ip).length > 0) {
                $.ajax({
                    type: "POST",
                    url: "http://localhost/integration/insert.php",
                    data: dataString,
                    crossDomain: true,
                    cache: false,
                    beforeSend: function() {
                        $("#insert").val('Connecting...');
                    },
                    success: function(data) {
                        if (data == "success") {
                            alert("Successfully submitted");
                            $("#insert").val('submit');

                        } else if (data == "error") {
                            alert("error");
                        }
                    }
                });
            }
                return false;
        });
    });
</script>

两个脚本都是独立工作的。

Answer 1

请尝试以下代码：

这就是我所做的。我已将它转换为一个函数，您可以在插入代码完成后调用它，也可以在刷新页面时调用它。

function getUpdatedData() {
  var url = "http://localhost/integration/json.php";
  $.getJSON(url, function(result) {
    console.log(result);
    $.each(result, function(i, field) {
      var comment = field.comment;
      var user = field.user;
      var post_time = field.post_time;
      $("#listview").append("<tr class='even gradeA' width = '30px'><td>" + comment + "</td><td>" + user + "-" + post_time + "</td></tr>");
    });
  });
}

$(document).ready(function() {
  getUpdatedData();
  $("#insert").on('click', function() {
    var comment = $("#comment").val();
    var user = $("#user").val();
    var ip = $("#ip").val();
    var dataString = "comment=" + comment + "&user=" + user + "&ip=" + ip + "&insert=";
    if ($.trim(comment).length > 0 & $.trim(user).length > 0 & $.trim(ip).length > 0) {
      $.ajax({
        type: "POST",
        url: "http://localhost/integration/insert.php",
        data: dataString,
        crossDomain: true,
        cache: false,
        beforeSend: function() {
          $("#insert").val('Connecting...');
        },
        success: function(data) {
          if (data == "success") {
            alert("Successfully submitted");
            $("#insert").val('submit');
            getUpdatedData();

          } else if (data == "error") {
            alert("error");
          }
        }
      });
    }
    return false;
  });
});

在一个脚本中发布数据并使用JSON和Javascript进行检索

1 个答案: