如何通过单击HTML按钮通过POST请求调用JSON?

时间:2014-10-16 12:51:17

标签: javascript jquery ajax json api

我已经尝试通过点击我的HTML文档中的按钮来通过Json调用POST请求,但它回来时出现错误404,也许Json请求它在这里或者可能是问题Jquery代码,我真的不知道。

API服务器已存在且已准备就绪。 我只是想制作一些"快捷链接"到Json文件的请求,直接发送到API服务器。 我尝试使用的代码如下:

    <html>
    <head>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
      <script>
        $jq1 = $.noConflict(true);
    </script>
      <link rel="stylesheet" href="/resources/demos/style.css">
      <script>
      $jq1(function() {
        $jq1( "#tabs" ).tabs();
      });
     </script>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <script>
        $jq2 = $.noConflict(true);
    </script>

    <script>
$jq2(document).ready(function(){
$jq2("button").click(function(){
$jq2.ajax({
  url: "https://api.meet2know.com/v1/leads",
  username: "username",
  password: "password",
  data: "request.json",
success: function(data){ 
    console.log("success: ", data); 
},
error: function(err){ 
    console.log("error: ", err); 
},
  dataType: "jsonp"
        });
    });
 }); 
    </head>

    <body>
    <div id="tabs-4">
    <table align="center">
      <tr>
        <th><h2>POST requests - Production</h2></th>
      </tr>

    <td>
    <ul class="b">
    <button>Send POST request</button><br><br>
    </td>
    </body>

这是POST请求的响应(错误404):

Remote Address:23.253.174.91:443
Request URL:https://api.meet2know.com/v1/leads?callback=jQuery11110012059795670211315_1413464815326&request.json&_=1413464815327
Request Method:GET
Status Code:404 Not Found
Request Headersview source
Accept:*/*
Accept-Encoding:gzip,deflate
Accept-Language:en-US,en;q=0.8,he;q=0.6
Authorization:Basic dmNpdGE6c3RhZ2luZw==
Connection:keep-alive
Cookie:mp_934d895d2a43b6804e4df6f0cb54008d_mixpanel=%7B%22distinct_id%22%3A%20%2214903ad2cbf84-02b7a455d-4748032e-1fa400-14903ad2cc01f2%22%2C%22%24initial_referrer%22%3A%20%22%24direct%22%2C%22%24initial_referring_domain%22%3A%20%22%24direct%22%7D; remember_admin_token=BAhbB1sGaRVJIiIkMmEkMTAkd3lTdlAwODlJb295WTUxMHp6Um5XLgY6BkVU--9a67de09d5a72b8805f589528aca55099335e9de; __zlcmid=RHe7qTN3yuF9zc; __utma=102324637.495385716.1413102578.1413308718.1413311902.12; __utmc=102324637; __utmz=102324637.1413102578.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); _vcita_session_integration=BAh7EUkiD3Nlc3Npb25faWQGOgZFRkkiJTY4NWZmNzhkMmM4NTZhZTEyZGZkMTE2MTZlNWI3OWRiBjsAVEkiEGZpcnN0X3RvdWNoBjsARlRJIhFsYW5kaW5nX3BhZ2UGOwBGSSINSG9tZXBhZ2UGOwBUSSIPaW52aXRhdGlvbgY7AEZpAgcMSSISc291cmNlX2ludml0ZQY7AEZJIg1XRUJQLVJFRwY7AFRJIhRzb3VyY2VfcmVmZXJyZXIGOwBGSSIvaHR0cDovL2ZpZ2h0Lm1lZXQya25vdy5jb20vdi96YXAuMTIzNC9ob21lBjsARkkiFGFkbWluX3JldHVybl90bwY7AEZJIhEvYWRtaW4vdXNlcnMGOwBGSSIad2FyZGVuLnVzZXIuYWRtaW4ua2V5BjsAVFsHWwZpFUkiIiQyYSQxMCR3eVN2UDA4OUlvb3lZNTEwenpSblcuBjsAVEkiHndhcmRlbi51c2VyLnpvbmVfMzYxMS5rZXkGOwBUWwhpAug%2FaQIbDiIlNjk0NzUwYjFlNzFiOTlhMjdmMTI3NDU3ZmQzZmJkMGJJIhx3YXJkZW4udXNlci56b25lXzEyLmtleQY7AFRbCGkCDElpESIlMjdlYjJkNjEyYmJkMmNhZGIxYWU5MGEwMWZmMTUyOGNJIhl3YXJkZW4udXNlci51c2VyLmtleQY7AFRbB1sGaQKfD0kiGXBidm9wWWpHWHlqenpKc3hKcEFvBjsAVEkiEF9jc3JmX3Rva2VuBjsARkkiMUtweGVycXMzcDFXaC9rWTNMVkdXM2tGSE1QSnFleTVSV2JRYStacDl3STg9BjsARg%3D%3D--138e9dee16f3409e7b8870b0e0053888777776a4; mp_d482fd7678983cbb47786f77b1e63bbd_mixpanel=%7B%22distinct_id%22%3A%20%223999%22%2C%22Landing%20Page%22%3A%20%22Dashboard%22%2C%22%24initial_referrer%22%3A%20%22%24direct%22%2C%22%24initial_referring_domain%22%3A%20%22%24direct%22%2C%22Invite%22%3A%20%22WEB_PRO_SUB%22%2C%22Source%20Referrer%22%3A%20%22http%3A%2F%2Ffight.meet2know.com%2Fv%2Fzap.1234%2Fhome%22%2C%22Origin%22%3A%20%22Top%20menu%20-%20account%22%2C%22User%20Type%22%3A%20%22Individual%22%2C%22User%20Id%22%3A%203999%2C%22Full%20Name%22%3A%20%22Samuel%20L.%20Jackson%22%2C%22Industry%22%3A%20%22Financial%20Services%22%2C%22Profession%22%3A%20%22Financial%20Services%20%2F%20Bank%22%2C%22Time%20Zone%22%3A%20%22Amsterdam%22%2C%22Pivot%20Id%22%3A%203846%2C%22Locale%22%3A%20%22en%22%2C%22Plan%22%3A%20%22Ultimate%22%2C%22Business%22%3A%20%22false%22%2C%22Trial%22%3A%20%22false%22%2C%22Directory%20Name%22%3A%20%22doctors.co.il%22%2C%22__mps%22%3A%20%7B%7D%2C%22__mpso%22%3A%20%7B%7D%2C%22__mpa%22%3A%20%7B%7D%2C%22__mpap%22%3A%20%5B%5D%2C%22Marketing%20Channel%22%3A%20%22Wix%22%2C%22Source%20Type%22%3A%20%22Unknown%22%7D
Host:api.meet2know.com
Referer:http://idantesting.comuv.com/
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.124 Safari/537.36
Query String Parametersview sourceview URL encoded
callback:jQuery11110012059795670211315_1413464815326
request.json:
_:1413464815327
Response Headersview source
Cache-Control:must-revalidate, no-cache, no-store, private, max-age=0
Connection:keep-alive
Content-Encoding:gzip
Content-Type:text/html; charset=utf-8
Date:Thu, 16 Oct 2014 13:07:12 GMT
Expires:Fri, 01 Jan 1990 00:00:00 GMT
P3P:CP="NOI ADM DEV PSAi COM NAV OUR OTRo STP IND DEM"
Pragma:no-cache
Server:nginx/1.6.0
Set-Cookie:source_invite=WEBP-REG; path=/
Set-Cookie:invitation=3079; path=/
Set-Cookie:pivots=3846; path=/; expires=Mon, 16-Oct-2034 13:07:12 GMT
Status:404 Not Found
Transfer-Encoding:chunked
X-Rack-Cache:miss
X-Request-Id:8c74b6d83cce50d70100b31491f7eeed
X-Runtime:0.065370
X-UA-Compatible:IE=Edge,chrome=1

这是控制台日志中的错误:

    GET https://api.meet2know.com/v1/leads?callback=jQuery1111009170888806693256_1413466282769&request.json&_=1413466282770  
jquery.min.js:4send jquery.min.js:4m.extend.ajax 
jquery.min.js:4(anonymous function) 
(index):30m.event.dispatch jquery.min.js:3r.handle

并且..这是JSON文件(request.json)

{
  "authorization": "Token",
  "token": "15eed06....",
  "business_id": "87cf...",
  "identifier_type": "email",
  "email": "idan.1212@hotmail.com",
  "request_title": "idantesting",
  "first_name": "demo",
  "last_name": "testing",
  "source": "QA_Sendbox",
  "message": "body msg"
}

1 个答案:

答案 0 :(得分:0)

尝试为成功事件添加处理程序而不是"success"字符串,它什么都不做,所以你知道什么时候它运行良好... 像这样:

success: function(data){ 
    console.log("success: ", data); 
},

另外,您可能也想为错误添加一个事件监听器。

error: function(err){ 
    console.log("error: ", err); 
},