|
原生态Ajax需要一个新的aspx作为后台，这里我建了两个aspx分别是qiantai.aspx和houtai.aspx，前台调用后台数据，后台以一串字符串传给前台，前台两次分割
（1）在houtai.aspx.cs中代码如下：
后台的主要函数，连接数据库，查出需要的数据供前台调用
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
public partial class test数据库_Default : System.Web.UI.Page
{
SqlConnection conn;
SqlCommand comm;
SqlDataReader sdr;
protected void Page_Load(object sender,EventArgs e)
{
string strFind = Request.QueryString["strFind"];
string strResult = findInfo(strFind);
Response.Write(strResult);
Response.End();
}
private string findInfo(string txtFind)
{
string a1;
try
{
conn = new SqlConnection("server=.;uid=sa;pwd=123;database=BJG_CaseExchangeDB");
conn.Open();
string strSQL = "select * from CaseInfo where CaseAddress like '%" + txtFind + "%'";
comm = new SqlCommand(strSQL,conn);
sdr = comm.ExecuteReader();
string strInfo = "";
for (int i = 0; i < sdr.FieldCount; i++)
strInfo += sdr.GetName(i) + "t";//查出的数据用"t"和"n"进行区别，以便前台分割
strInfo += "n";
while (sdr.Read())
{
for (int i = 0; i < sdr.FieldCount; i++)
{
strInfo += sdr[i] + "t";
}
strInfo += "n";
}
if (sdr.HasRows)
a1 = strInfo;
else
a1 = "无匹配记录";
sdr.Close();
}
catch (Exception aaa)
{
a1 = aaa.ToString();
}
return a1;
}
}
（2）在qiantai.aspx中代码如下：
引用esri网站的一些API
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="qiantai.aspx.cs" Inherits="test数据库_houtai" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<link rel="shortcut icon" href="zhengfu.ico" />//网站图标
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>
<script type="text/javascript" src="addMap.js"></script>
<script type="text/javascript" src="addhoutai.js"></script>
<style type="text/css">
#Text1
{
height: 53px;
width: 169px;
}
#TextArea1
{
height: 215px;
width: 1521px;
}
#Button2
{
width: 139px;
height: 56px;
}
#Button1
{
height: 53px;
width: 102px;
}
</style>
</head>
<body class="claro">
<button onclick="tb.activate(esri.toolbars.Draw.POINT);">Point</button>
<button onclick="tb.activate(esri.toolbars.Draw.MULTI_POINT);">Multipoint</button>
<button onclick="clearGeo()">清除</button>
<div id="map" style="width:1024px; height:512px; border:2px solid #000;"></div>
Zoom Slider :
<input type="button" value="Hide" onclick="map.hideZoomSlider()" />
<input type="button" value="Show" onclick="map.showZoomSlider()" />
<form id="form1" runat="server">
<textarea id="TextArea1" name="S1"></textarea><br />
<br />
<input id="Button2" type="button" value="搜索" onclick="findInfo1()"/>
<input id="Text1" type="text" value="月坛南街"/>
<input id="Button1" type="button" value="确定" onclick="submit1()"/><br />
<br />
</form>
</body>
</html>
这里面引用了两个重要的js文件。
（3）在addhoutai.js中代码如下：
主要功能是调用后台的函数把数据库的东东查出来传给前台，并展示在textarea中
var xmlhttp=new XMLHttpRequest();
function findInfo1()
{
var strFind=document.getElementById("Text1").value;
var url="houtai.aspx?strFind="+encodeURIComponent(strFind);
xmlhttp.open("post",url,true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.onreadystatechange=updatePage;
xmlhttp.send(null);
}
var response
function updatePage()
{
if(xmlhttp.readyState==4)
{
if(xmlhttp.status==200)
{
response=xmlhttp.responseText;
document.getElementById("TextArea1").value=response;
}
else
alert(xmlhttp.status);
}
}
var X;
var Y;
var title;//还没用到呢
var n;
function submit1()
{
var infoss=response.split("n");//用字符串数组infoss来接收一条条的数据
n=infoss.length-2;
alert(n);
X=new Array(n);
Y=new Array(n);
title=new Array(n);
for(var i=1;i<=n;i++)
{
var infos=infoss[i];
var info=infos.split("t");//用字符串数组info来接收一条数据中的各个项
X[i]=info[5];
Y[i]=info[6];
title[i]=info[1];
}
cityLayer.clear();
var spat=new esri.SpatialReference();
spat=map.spatialReference;
var symbol = new esri.symbol.SimpleMarkerSymbol();
symbol.setColor(new dojo.Color([0,255]));
for(var j=1;j<n;j++)
{
var point=new esri.geometry.Point(X[j],Y[j],spat);
cityLayer.add(new esri.Graphic(point,symbol));
}
}
（4）在addmap.js代码中：
把查出来的点坐标加入地图中
dojo.require("esri.map");
dojo.require("esri.geometry");
dojo.require("esri.toolbars.draw");
var map,tb,cityLayer;
function init()
{
map = new esri.Map("map");
dojo.connect(map,"onLoad",initToolbar);
map.addLayer(new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost/gis/rest/services/baseMap/MapServer"));
cityLayer = new esri.layers.GraphicsLayer();
map.addLayer(cityLayer);
dojo.connect(map,"onClick",addPoint);
}
function initToolbar(map)
{
tb = new esri.toolbars.Draw(map);
dojo.connect(tb,"onDrawEnd",addGraphic);
}
function addGraphic(geometry)
{
var symbol = null;
var type = geometry.type;
if (type === "point" || type === "multipoint")
{
symbol = new esri.symbol.SimpleMarkerSymbol();
symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE);
symbol.setSize(10);
symbol.setOutline( new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,new dojo.Color([255,0]),3) );
symbol.setColor(new dojo.Color([0,255,0.5]));
}
cityLayer.add(new esri.Graphic(geometry,symbol));
}
function addPoint(evt) {
map.infoWindow.resize(250,100);
map.infoWindow.setTitle("Coordinates");
map.infoWindow.setContent("geo X/Y: " + evt.mapPoint.x.toFixed(2) + "," + evt.mapPoint.y.toFixed(2) +
"<br />screen x/y : " + evt.screenPoint.x + "," + evt.screenPoint.y);
map.infoWindow.show(evt.mapPoint,map.getInfoWindowAnchor(evt.screenPoint));
}
function clearGeo()
{
cityLayer.clear();
}
dojo.addOnLoad(init); （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
