前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端和后端交互的方式

前端和后端交互的方式

作者头像
IT人一直在路上
发布2019-09-18 10:47:09
3K0
发布2019-09-18 10:47:09
举报
文章被收录于专栏:前端重点笔记

1.前端开发与后台交互的方式

(1)form提交 同步请求

(2)Ajax提交 异步请求 发送json对象

一 、Ajax:异步的javascript和XML

主要优点:

1.异步请求,不妨碍用户浏览页面或者其他操作。

2.局部刷新,无需重新刷新整个页面。

缺点:

1.back和History,对浏览器机制的破坏。

2.安全问题。易受到黑客攻击。

AJAX原理图:

代码语言:javascript
复制
$.ajax({
                cache: true,
                type: "POST",
                url:‘表单提交的url地址’,
                data:$('#myformid').serialize(),// 序列化form表单数据,后台解析需要反序列化
                async: false,//false表示同步,true表示异步
                error: function(request) {
                    alert("请求失败");
                },
                success: function(data) {
                   console.log(data);//data为服务器处理后返回的数据
                   alert("请求成功");
                }
            });
    

二、Form表单提交到后台交互

代码语言:javascript
复制
<form id="myform" name="myform" method="post" onsubmit="return sumbitTest();"   
      action="RegisterAction.action">  
    <table>  
        <tr>  
            <td>姓名:</td>  
            <td> <input type="text" name="name" /> </td>  
        </tr>  
        <tr>  
            <td>性别:</td>  
            <td>  
                <input type="radio" name="sex" value="1"> 男  
                <input type="radio" name="sex" value="0"> 女  
            </td>  
        </tr>  
        <tr>  
            <td>年龄:</td>  
            <td>  
                <select name="age">  
                    <option value="20">20</option>  
                    <option value="21">21</option>  
                    <option value="22">22</option>  
                </select>  
            </td>  
        </tr>  
        <tr>  
            <td colspan="2">  
                <input type="submit" value="Submit普通提交">  
                <input type="button" id="ajaxBtn" value="AJAX提交" />  
                <input type="button" id="jqueryBtn" value="jQuery提交" />  
                <input type="button" id="jsBtn" value="JS提交" />  
                <input type="submit" value="onSubmit提交" />  
            </td>  
        </tr>  
    </table>  
</form>

form表单提交为同步请求,submit按钮会刷新整个页面

注意在使用ajax提交form表单时,提交按钮应为type=“button”,然后为其绑定点击事件,而不应该为type=“submit”,因为submit按钮会刷新整个页面,从而导致ajax请求被拦截。

备注:如有不完整或者错误的地方请多多指教

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-05-08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档