JavaScript 从 REST API 获取 JSON 而无需重新渲染页面答案

【问题标题】：JavaScript get JSON from rest API without re-rendering the pageJavaScript 从 REST API 获取 JSON 而无需重新渲染页面
【发布时间】：2013-08-21 20:31:44
【问题描述】：

问题

我正在尝试在 javascript 中查询一个 rest API 并使用 jQuery 来解析并将结果插入到我的网页中。当进行查询时，我相信它会提交搜索表单并重新呈现页面，从而删除我刚刚查询和插入的所有元素。

是否可以从 rest api 获取 JSON 对象而不重新渲染网页？

这是我用来提出请求的内容：

function get_data(){
    var url = "www.rest_api/search_term&apikey=My_Key"
    var xmlHttp = null;
    xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", url, false );
    xmlHttp.send( null );
    return xmlHttp.responseText;
}

搜索词来自一个简单的输入表单，并在点击提交按钮时提交。我的目标是将此网页保留在单个页面上，并避免出现结果页面。

我尝试过的

I can't return my json object

Get JSON data from external URL and display it in a div as plain text

http://api.jquery.com/jQuery.getJSON/

请求网址示例：

http://woof.magnify.net/api/content/find?vq=karma&per_page=5&page=1&sort=popularity&key=84LTHNZQ1364W14D&format=json

【问题讨论】：

这一切都取决于 - api 是否支持 JSONP？
停止使用提交时重新加载页面的表单并坚持使用 ajax 调用？
@adeneo 到目前为止，我已经能够通过在函数结束时始终返回 false 来做到这一点，但是当我使用函数获取 json 时，我似乎无法绕过提交页面。
@NeilS 我发现它确实支持文档中的 JSONP。
在按钮的点击事件中添加event.preventDefault()，或者onclick='functionName();return false;'

标签： javascript jquery html rest

【解决方案1】：

记住调用jsonp api时，你必须在url中添加一个额外的参数：callback=?

这里有一个简单的小提琴作为例子： http://jsfiddle.net/8DXxN/

【讨论】：

感谢尼尔的回答。我一直在尝试使用回调，但无法让它发挥作用。我将如何返回数据来操作它？我试过：function (data) {return data;}); 但它出错并说我应该使用发布请求。
数据由 json 对象表示，这就是为什么在我的小提琴中我使用 JSON.stringify 将数据对象转换为字符串的原因。你在哪里得到错误？在jsfiddle？还是在您自己的环境中？
在小提琴和我的本地环境中。 jsfiddle.net/8DXxN/1 错误：{"error": "Please use POST request"} 当我返回 JSON.stringify(data);时同样的问题@
在该示例中，您将在成功回调函数中返回一个数据对象。您应该操纵 DOM 以在该函数中插入数据，而不是返回未受影响的对象。
这里有一个关于从 ajax 请求插入数据的好教程：phpeveryday.com/articles/jQuery-AJAX-and-JSON-P969.html