如何利用Javascript发送GET/POST请求

如何利用Javascript发送GET/POST请求

最近在做基于TWS的分析系统，因为采用Flask+Java的技术架构方案，所以需要开发Web，然而我自己没有做过类似的开发，所以很多工作是从头开始学着做的。因此，在实现表单数据提交的时候，当时就想到个问题，如果一个页面里内容足够多的话，仅用form提交的话，后台就需要做非常复杂的判断，以此确认用户提交的是哪类数据，这样工程不仅难看，而且低效。

于是咨询了朋友的意见，加上在网络上查找的资料，以及我自己做的实验，我将提交的方法做了个总结。

基于JQuery的GET/POST数据提交方式

如果初学Javascript，对于JQuery可能会跟我一样完全不清楚，所以适当的普及一下JQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。JQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。JQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

JQuery的官网地址，可以点击访问。根据官方给出的版本，目前最新的已经到了v3.2.1，因此建议可以考虑去官网下载最新的JQuery，以次获得更多的特性。

JQuery很强大，但实现当前这个功能需要的仅仅是简单的两个，API，完整的API说明文档可以点击查看，此外，在runnoob.com上也有关于Javascript的学习资料。

$.get(url, data, callback)

参数	描述
url	必需，规定您需要请求的URL
data	可选，规定连同请求发送到服务器的数据，格式是json
callback	可选，回掉函数，当请求成功时运行的函数

$.post(url, data, callback)

参数	描述
url	必需，规定您需要请求的URL
data	可选，规定连同请求发送到服务器的数据，格式是json
callback	可选，回掉函数，当请求成功时运行的函数

使用方法是这样的，首先，在需要调用JQuery的页面里，用script标签导入Jquery文件，例如：

    <script src="static/js/jquery-3.2.1.min.js">script>

然后，网页空白的地方，申明你的方法以及需要传递的参数，你可以这样做：

    <script>
        function doPost(url)
        {
            var val1 = document.getElementsByName("key1").value;
            var val2 = document.getElementsByName("key2").value;

            $.post(url, {'key1':val1, 'key2':val2});
        }
    script>

接着，在你的input/button标签或者需要发送数据的地方，增加一个onclick的属性，例如：

    ...
    "button" value="submit" οnclick="doPost('/')" />
    ...

这样就可以使用JQuery发送数据了。

另外一种方法，是构造一个form，利用form来进行提交。

基于Form的GET/POST数据提交方式

/*
* @url: url link
* @action: "get", "post"
* @json: {'key1':'value2', 'key2':'value2'} 
*/
function doFormRequest(url, action, json)
{
    var form = document.createElement("form");
    form.action = url;
    form.method = action;

    // append input attribute and valus
    for (var key in json)
    {
        if (json.hasOwnProperty(key))
        {
            var val = json[key];
            input = document.createElement("input");
            input.type = "hidden";
            input.name = key;
            input.value = val;

            // append key-value to form
            form.appendChild(input)
        }
    }

    // send post request
    document.body.appendChild(form);
    form.submit();

    // remove form from document
    document.body.removeChild(form);
}

调用方法很简单，把这个代码块copy到你自己的HTML文档里的script标签内，然后就可以直接用了，选择GET/POST方法根据你自己的需要就行。 

具体在使用过程中有什么区别，得你自己慢慢体会了。

出处：http://blog.csdn.net/poisonchry/article/details/77649398

python后端处理请求数据：

nginx > url >>view >>model>view >nginx

url.py

"""
from django.conf.urls import patterns,include, url
from django.contrib import admin
from blog import views
from django.conf.urls.static import static
#from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
    #url(r'^ckeditor/', include(ckeditor.urls)),
    url(r'^ckeditor/', include('ckeditor_uploader.urls')),
    
    url(r'^$', views.index),
    url(r'^index/$', views.index),
    url(r'^logout/$', views.index), 
    url(r'^mod/logout/$', views.index),
    url(r'^event_manage/logout/$', views.index),
    url(r'^accounts/login/$', views.index),   
    url(r'^admin/', views.index),


    url(r'^mod/$', views.mod),
    url(r'^modtool/$', views.modtool),
    url(r'^login_action/modtool/$', views.modtool),
    url(r'^edindex', views.edindex),
    url(r'^login_action/$', views.login_action),
    url(r'^event_manage/$', views.event_manage),
    url(r'^movie/$',views.movie,name="movie"),
    url(r'^articlelist/(?P[0-9]+)$', views.articlelist,name='articlelist'),
    url(r'^articleforeword/$',views.articleforeword),


    url(r'^echart1/$', views.echart1), 
    url(r'^echart2/$', views.echart2), 
]
 

view.py

@login_required
def login_action(request):
    if request.method == 'POST':
        username = request.POST.get('username', '')
        password = request.POST.get('password', '')
        user = auth.authenticate(username=username, password=password)
        if user is not None:
            auth.login(request, user) # 登录
            request.session['user'] = username # 将session 信息记录到浏览器
            response = HttpResponseRedirect('modtool/')
            return response
        else:
            return render(request,'index.html', {'error': 'username or password error!'})
    else:
        return render(request,'index.html', {'error': 'username or password error!'})