使用ajax无法跨源问题总结

参考文章：

浏览器同源政策及其规避方法

跨域资源共享 CORS 详解

使用jQuery实现跨域提交表单数据

1. <form action="http://v.juhe.cn/weather/index">
2.     <label>输入要查询的城市名称：<input type="text" name="cityname" id="cityname" placeholder="北京"></label>
3.     <button type="submit" id="show">查询</button>
4. </form>

方法1：

1. function addScriptTag(src){
2.     var script=document.createElement("script");
3.     script.setAttribute("type","text/javascript");
4.     script.src=src;
5.     document.body.appendChild(script);
6. }
8. function foo(data) {
9.     console.log(data.result.today);
10. }
12. $(document).ready(function(){
13.     //当发生 submit 事件时运行的函数
14.     $("form").submit(function(e){
15.         addScriptTag("http://v.juhe.cn/weather/index?   cityname=%E8%8B%8F%E5%B7%9E&key=47ae6e500980056c1defce105b3a90c3&callback=foo");
16.     });
17. })

 

方法2：

参考文章：http://www.helloweba.com/view-blog-166.html

1. $(document).ready(function(){
2.     var data=$("form").serialize(); //输出序列化表单值的结果
3.     data+="&key=47ae6e500980056c1defce105b3a90c3";
5.     $.getJSON("http://v.juhe.cn/weather/index?callback=?",
6.         data,
7.         function (responseText) {
8. 　　　    conlo.log(responseText);
9.         }
10.     );
12. });