ajax调用

时间:2017-05-30 18:26:15

标签: jquery ajax freshdesk

下面的示例代码是Freshdesk(https://github.com/freshdesk/fresh-samples)提供的jquery示例。我插入我的网址和api密钥,它的工作原理。

我想自定义这个,这样当按下Read按钮时,输出的json对象数据是可点击的,特别是票据“Subject”值。点击此按钮将关闭故障单。

我不知道从哪里开始,最终只想在ajax调用后获得一个可点击的值。点击关闭票证的行动将是我需要解决的一个单独的事情。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(
      function() {
        var yourdomain = 'yourdomain'; // Your freshdesk domain name. Ex., yourcompany
        var api_key = 'API_KEY'; // Ref: https://support.freshdesk.com/support/solutions/articles/215517-how-to-find-your-api-key
        $.ajax(
          {
            url: "https://"+yourdomain+".freshdesk.com/api/v2/tickets",
            type: 'GET',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            headers: {
              "Authorization": "Basic " + btoa(api_key + ":x")
            },
            success: function(data, textStatus, jqXHR) {
              $('#result').text('Success');
              $('#code').text(jqXHR.status);
              $('#response').html(JSON.stringify(data, null, "<br/>"));
            },
            error: function(jqXHR, tranStatus) {
              $('#result').text('Error');
              $('#code').text(jqXHR.status);
              x_request_id = jqXHR.getResponseHeader('X-Request-Id');
              response_text = jqXHR.responseText;
              $('#response').html(" Error Message : <b style='color: red'>"+response_text+"</b>.<br/> Your X-Request-Id is : <b>" + x_request_id + "</b>. Please contact support@freshdesk.com with this id for more information.");
            }
          }
        );
      }
    );
});
</script>
</head>
<body>

<button>Read</button>
<br/></br>
<table cellspacing = '10'>
  <tr>
    <td> <b>Result</b></td>
    <td> <div id = 'result'></div> </td>
  </tr>
  <tr>
    <td> <b>Code</b></td>
    <td> <div id = 'code'></div> </td>
  </tr>
  <tr>
    <td> <b>Response</b></td>
    <td> <div id = 'response'></div> </td>
  </tr>
</table>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

迟到的回复。

我用这个例子一直在构建很多东西 这应该有帮助

<!DOCTYPE html>
<html>
<head>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(
  function() {
    var yourdomain = 'yourdomain'; // Your freshdesk domain name. Ex., yourcompany
    var api_key = 'API_KEY'; // Ref: https://support.freshdesk.com/support/solutions/articles/215517-how-to-find-your-api-key
    $.ajax(
      {
        url: "https://"+yourdomain+".freshdesk.com/api/v2/tickets",
        type: 'GET',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        headers: {
          "Authorization": "Basic " + btoa(api_key + ":x")
        },
        success: function(data, textStatus, jqXHR) {
          $('#result').text('Success');
          $('#code').text(jqXHR.status);
      //Removed the standard response
      //converted the response to JSON
    var jsonText = JSON.stringify(data);
            var obj = data;

            var tbl=$("<table/>").attr('id','mytable');
            $('#response').append(tbl);
    //added a table element and then looped through each subject and added it as a seperate div that cals the closure function

    for(var i=0;i<obj.length;i++){
    var td1="<div id='"+obj[i].subject+"' onclick='CloseTicket()'>Subject: "+obj[i].subject+"<br></div>";
    $('#mytable').append(td1);
     }


        },
        error: function(jqXHR, tranStatus) {
          $('#result').text('Error');
          $('#code').text(jqXHR.status);
          x_request_id = jqXHR.getResponseHeader('X-Request-Id');
          response_text = jqXHR.responseText;
          $('#response').html(" Error Message : <b style='color: red'>"+response_text+"</b>.<br/> Your X-Request-Id is : <b>" + x_request_id + "</b>. Please contact support@freshdesk.com with this id for more information.");
        }
      }
    );
  }
);
});

function CloseTicket() {
alert('delete me');
//To test closure function would work
//IRL this would be an update Ticket Call that includeds the ticket id
}
</script>
</head>
<body>

<button>Read</button>
<br/></br>
<table cellspacing = '10'>
 <tr>
    <td> <b>Result</b></td>
   <td> <div id = 'result'></div> </td>
  </tr>
  <tr>
    <td> <b>Code</b></td>
    <td> <div id = 'code'></div> </td>
  </tr>
 <tr>
    <td> <b>Response</b></td>
   <td> <div id = 'response'></div> </td>
  </tr>
</table>
</body>
</html>