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

Question

如何结合脚本 1 和脚本 2 来实现我的 objective 发送数据以及一个脚本。

我们的想法是在发送 post 时随时获取新鲜内容。我在 Framework7 中使用它。这两个脚本已经在 post 或检索数据方面发挥了很好的作用。

这是来自后端的 getting/fetching 数据的脚本。

脚本 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的作用是post数据到服务器

<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 发布数据和检索

Posting data and retrieving with JSON and Javascript in one script

javascript

jquery

json

html-framework-7