ajax如何使用json

ajax with json how to

本文关键字：json 何使用 ajax      更新时间：2023-09-26

我尝试AJAX和JSON。我有这个非常简单的脚本。你能帮我把它修好吗？

html文件

               <div class="esemeny">
                <h2>Event</h2>
                <p></p>
                <button>click</button>
                </div>

json文件，我称之为eventresult.json

                {name: whatever,
                }

和javascript文件

$(function(){
          $('button').on('click', function(){
          $.ajax('/javascript/eventresult.json', {
          dataType: 'json',
          success: function(result){
          var esemeny = $('.esemeny');
          esemeny.find('p').html(result.name);
          }
       });
    });
 });

感谢

无论如何，我认为，你没有确切地说出你想做什么，这就是你想做的：JSON:

{
   name: "whatever"
}

JS:

$(function(){
          $('button').on('click', function(){
          $.ajax('/javascript/eventresult.json', {
          dataType: 'json',
          type: 'GET' // you want to get content 
          success: function(result){
          var esemeny = $('.esemeny');
          esemeny.find('p').html(result.name);
          }
       });
    });
 });

希望对有所帮助

我想您的JSON应该看起来像

{
   name: "whatever"
}

注意双引号和不必要的逗号。

事实上，你没有清楚地描述这个问题。您可以从firebug控制台中看到一个调试，如下所示：

$.ajax('/javascript/eventresult.json', {
      dataType: 'json',
      success: function(result){
      var esemeny = $('.esemeny');
      esemeny.find('p').html(result.name);
      }
   }).fail(function(jqXHR, textStatus, errorThrown){console.log(textStatus+':'+ errorThrown)})

以下是一些使其发挥作用的建议：

  • 确保在html文件中包含必要的脚本文件：

<head>
  <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
</head>
<div class="esemeny">
  <h2>Event</h2>
  <p></p>
  <button>click</button>
</div>
<script src="javascript.js"></script>

  • 确保在json文件中使用有效的json

{"name"："随便"}

  • 在javascript中使用.click（）函数：

$(function() {
  $('button').click(function() {
    $.ajax('/trials/eventresult.json', {
      dataType: 'json',
      success: function(result) {
        var esemeny = $('.esemeny');
        esemeny.find('p').html(result.name);
      }
    });
  });
});

相关文章：