web软件定制开发供应商程序的整个流程
1.流程图
基本流程
软件定制开发供应商加入数据库后
2.软件定制开发供应商请求的几种方式
get请求
-
请求方式：
软件定制开发供应商在浏览器中输入url?参数名1=参数值1&参数名2=参数值2
-
只要可以书写地址的地方都可以发起get请求
如：浏览器地址栏，a，form，jquery+ajax
-
应用场景：查询数据(不够安全)
post请求
-
请求方式
url：请求路径(浏览器地址栏) data: 参数域 (js代码中)
-
jquery+ajax(异步请求)
-
应用场景：
增删改数据
3.利用ajax方式进行请求的代码
html代码
<body class="bg"> <div class="whole"> <h3> 管理系统 </h3> <div class="item"> <span>账号：</span><input type="text" class="account"> </div> <div class="item"> <span>密码：</span><input type="password" class="password"> </div> <div class="item"> <input type="button" class="login" value="登录"> </div> </div></body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
js代码
<script> $(document).ready(function(){ //登录 $(".login").on("click",function(){ //动态获取 var account=$(".account").val(); var password=$(".password").val(); //发起ajax请求 $.ajax({ //以get方式请求 //url:"地址？account=admin&password=1234" url:"TestServlet",//请求路径既是要访问的servlet的名称相对路径 type:"post",//请求方式默认是get data:{ account:account, password:password, },//参数域发送给服务器的数据 success:function(data){ //请求成功后执行的函数 if(data.msg=="登录成功"){ alert(data.account) alert(data.password) }else{ alert("登陆失败") } }, error:function(data){ //请求失败后执行的而函数 alert("出错了") } }) }) })<script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
js代码详解
-
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
- $美元符号定义 jQuery
- 选择符（selector）“查询"和"查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
-
$(“.login”).on(“click”,function(){ })
解释：
-
$(“.login”)通过CSS选择html元素
<input type="button" class="login" value="登录">- 1
-
$(“.login”).on(“click”,function(){ })
为这个html元素添加click事件
-
-
var account=$(“.account”).val();
- var account声明变量account
- $(“.account”)获取html元素
- $(“.account”).val();.val()用于获取html元素中的值
-
$.ajax({})表示发起
-
以get方式请求
//动态获取前端输入框的数据 var account=$(".account").val(); var password=$(".password").val(); $.ajax({ url:"TestServlet",//请求路径既是要访问的servlet的名称相对路径 type:"post",//请求方式默认是get //参数域发送给服务器的数据 //将前端获得的数据发送到后端 data:{ //变量名：数值 account:account,//第二个account为 var account=$(".account").val(); password:password, }, //下面的都是为了接受后台数据 success:function(data){ //请求成功后执行的函数 if(data.msg=="登录成功"){ alert(data.account) alert(data.password) }else{ alert("登陆失败") } }, error:function(data){ //请求失败后执行的而函数 alert("出错了") } })- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
后台TestServlet代码
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("testpost"); //解决中文乱码 request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); //设置后端给前端的信息格式，默认html可以改 response.setContentType("text/json"); //接受参数 //就是ajax请求中data域中的数据 String account=request.getParameter("account"); String password=request.getParameter("password"); //后端模拟逻辑，操作数据库 System.out.println(account); System.out.println(password); //仅传一个字符串String msg="false"; //传多个信息将字符串转为json对象 String msg="{\"msg\":\"登陆失败\",\"account\":\""+account+"\",\"password\":\""+password+"\"}"; if(account.equals("admin")&&password.equals("123456")) { msg="{\"msg\":\"登录成功\",\"account\":\""+account+"\",\"password\":\""+password+"\"}"; } //给前端响应数据 response.getWriter().write(msg);}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24