zoukankan      html  css  js  c++  java
  • ajax get调用请求过程

    1. 主页面超链接到DB连接测试
    
    main.html
    
    	<dl>  
    				    <dt><i class="icon-menu i_1 fl"></i>在线监控平台<i class="icon-menu i_6 fr"></i></dt>  
    				    <dd><a href="/addMachine">监控设备添加</a></dd>
    				    <dd><a href="/transactionIndex">Mysql 事务监控</a></dd>
    					<dd><a href="/lockIndex">Mysql 行锁监控</a></dd>
    					<dd><a href="/deltableindex">zabbix 表分区删除</a></dd>
    					<dd><a href="/static/index.php/Monitor/logIndex">日志查看</a></dd>
    					<dd><a href="/testdb">DB连接测试</a></dd>
    				</dl> 
    				
    
    				
    2.调用/testdb 
    
    node2:/django/mysite/mysite#cat urls.py
    
    from django.conf.urls import include,url
    from django.contrib import admin
    from blog import views as view
    from news import views as newview
    urlpatterns =( 
    url(r'^admin/', admin.site.urls),
    url(r'^blog/$',view.archive),
    url(r'^articles/',include("news.urls")),
    url(r'^upload/$',newview.upload,name='upload'),
    url(r'^main/$', newview.main),
    url(r'^$', newview.index),
    url(r'^get_name/$', newview.get_name),
    url(r'^index/$', newview.index),
    url(r'^test_func/$', newview.test_func),
    url(r'^addMachine/$', newview.addMachine),
    url(r'^transactionIndex/$', newview.transactionIndex),
    url(r'^lockIndex/$', newview.lockIndex),
    url(r'^deltableindex/$', newview.deltableindex),
    url(r'^testdb/$', newview.testdb)
    
    
    
    3.调用对应的页面:
    node2:/django/mysite/news/templates#cat testdb.html 
    <html>
    <head>
    	<title>运维平台</title>
    	<link rel="stylesheet" type="text/css" href="/static/Css/Equipment/index.css">
    	<link rel="stylesheet" type="text/css" href="/static/Css/Public/header.css">
    	<link rel="stylesheet" type="text/css" href="/static/Css/Public/menu.css">
    </head>
    <body>
    	<include file="Public:header"/>
    	<div class="content">
    		<include file="Public:menu"/>
    		<div class="con fl">
    			<div id="condition">
    				<label class="condition">用户</label><input type="text" name="condition" class="equipment_sz1">
    				<label class="condition">密码</label><input type="text" name="condition" class="equipment_sz2">
    				<label class="condition">端口</label><input type="text" name="condition" class="equipment_sz3">
    				<label class="condition">IP</label><input type="text" name="condition" class="equipment_sz4">
    				<label class="condition">DB</label><input type="text" name="condition" class="equipment_sz5">
    				<input type="submit" value="测试连接" class="equipment_search_btn es_2">
    			</div>
    			<table class="gridtable">
    				<tr>
    					<th>IP </th><th>Info</th><th>ENV</th>
    				</tr>
    			</table>
    		</div>
    	</div>
    </body>
    <script type="text/javascript" src="/static/Js/jquery-2.2.2.min.js"></script>
    <script type="text/javascript" src="/static/Js/Monitor/testdb.js"></script> 
    <!-- <script type="text/javascript" src="/static/Js/Public/ajax.js"></script> -->
    </html>
    
    
    4.调用JS
    
    node2:/django/mysite/static/Js/Monitor#cat testdb.js 
    $(function(){
    	var _env_bt = $(".content .con #condition .es_2");
    	_env_bt.on('click',function(){
    		var __user = $(".equipment_sz1").val();
    		var __password = $(".equipment_sz2").val();
    		var __port = $(".equipment_sz3").val();
    		var __ip = $(".equipment_sz4").val();
    		var __db = $(".equipment_sz5").val();
                    console.log(__user);
                    console.log(__password);
                    console.log(__port);
                    console.log(__ip);
                    console.log(__db);
    		var data={};
                    data.user = __user;
    		data.password = __password;
    		data.port=__port;
    		data.ip=__ip;
    		data.db=__db;
    		var successfn = function(jdata){
                        // $(".gridtable").empty();
    					// var _HTML="<tr><th>IP </th><th>Info</th><th>ENV</th></tr>";
    					// $.each(jdata,function(i,val){
    						// _HTML=_HTML+"<tr><td>"+jdata[i].ip+"</td><td>"+jdata[i].info+"</td><td>"+jdata[i].env+"</td></tr>";
    					// });
    					// $(".gridtable").html(_HTML)
    		alert("connect success")
                    };
    		var errorfn = function(){
                        alert("could not connect now");
                    };
    	$.ajax({
    				type: "get",
    				data: data,
    				url: "/api/check_db_connect",
    				dataType: "text",
    				success: function(d){
    					successfn(d);
    				},
    				error: function(e){
    					errorfn(e);
    				}
    			});
    	});
    	
    });

  • 相关阅读:
    Spring入门之一-------实现一个简单的IoC
    SpringBoot+SpringSecurity之多模块用户认证授权同步
    SpringBoot+SpringSecurity之如何forword到登录页面
    SpringBoot实现OAuth2认证服务器
    SpringBoot安全认证Security
    SpringBoot的ApplicationRunner和CommandLineRunner
    SpringBoot通过ApplicationArguments获取args
    安利demo
    多路canvas的mapbox gl
    复合canvas叠加显示
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13349359.html
Copyright © 2011-2022 走看看