Ajax 提交问题...

senloveyunver 2011-01-06 04:25:38 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<meta content="text/html" charset="utf-8">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

</head>

<body>

<p>

<table class="tablebar">

<tr align="center"> 

	<td align="center"> 税 收 任 务 完 成 情 况 </td>

</tr>

<tr></tr>

</table>

<br />

<form id="THxySscxJhwcbForm" name="THxySscxJhwcbForm" method="post" action="">

  <table>

<tr>

	<td>查询条件</td>

</tr>

</table>

  <table>

 <tr>

 <td>  年度</td>

 <td> <label>

  	<input name="nd" id="nd" type="text" size="10"   maxlength="4" value="2011

"  onblur="checkInput_build()"/>

	(例如：2010)

  </label></td>

  <td></td>

  <td> <label>

	 <select name="lb" id = "lb">    

		 <option value="0">税收计划</option>    

		 <option value="1">税收任务完成</option>    

	</select>   

  </label></td>

  </tr>

  </table>

<div style="OVERFLOW:auto;width:100%;height:230px">

  <table id="table" name="table" class="tdframe"  align="center" cellSpacing="1" cellPadding="0"  >

  <tr>

   <td align="center" valign="middle" nowrap="false" > </td>

	<td align="center" valign="middle" nowrap="false" >税务机关</td>

	<td  align="center" valign="middle" nowrap="false" >一月</td>

	<td  align="center" valign="middle" nowrap="false" >二月</td>

	<td  align="center" valign="middle" nowrap="false" >三月</td>

	<td  align="center" valign="middle" nowrap="false" >四月</td>

	<td  align="center" valign="middle" nowrap="false"  >五月</td>

	<td  align="center" valign="middle" nowrap="false"  >六月</td>

	<td  align="center" valign="middle" nowrap="false" >七月</td>

	<td  align="center" valign="middle" nowrap="false" >八月</td>

	<td  align="center" valign="middle" nowrap="false" >九月</td>

	<td  align="center" valign="middle" nowrap="false">十月</td>

	<td  align="center" valign="middle" nowrap="false">十一月</td>

	<td  align="center" valign="middle" nowrap="false" >十二月</td>

  <td  align="center" valign="middle" nowrap="false" >合计</td>

  </tr> 

  	

</table>

</div>

<br />

<br />

  <table width="98%" border="0" align="center" cellpadding="1" class="tdbgbutton" cellspacing="2"  style="position:relative">

    <tr>

      <td class="tdbgbutton"  width="71%">

        <div align="center">

          <input class="button" type="button" name="butSel" onClick="createQuery()" value=" 查 询 " /> 

          <label id="button_delelte">

            <input type="button" class="button" name="button_delelte" id="button_delelte" onClick="check()" value=" 删 除 " />

          </label>

          <input class="button" type="button" name="butSave" onClick="URL_Submit('ref')" value=" 保 存 修 该 "  />

          <input class="button" type="button" name="butTc" onClick="javascript:window.close()" value=" 关闭窗口 "  />

        </div>

    </tr>

  </table>

</form>

</body>

</html>

<script language="javascript">

//  ajax 异步提交方法开始

	//用于创建XMLHttpRequest对象

	var xmlHttp=false;

	function createXMLHttpRequest(){

		  //根据window.XMLHttpRequest对象是否存在使用不同的创建方式

	if (window.ActiveXObject)                          //在IE浏览器中创建XMLHttpRequest对象

	{

		try

		{

			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

		}

		catch(e)

		{

			try

			{

				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 

			}

			catch(ee)

			{

				xmlHttp=false;

			}

		}

		    //在IE浏览器中创建XMLHttpRequest对象

    }

	else if (window.XMLHttpRequest)                 //在非IE浏览器中创建XMLHttpRequest对象

	{

		try

		{

			xmlHttp = new XMLHttpRequest();                      

		}

		catch(e)

		{

			xmlHttp=false;

		}

    }

    

    return xmlHttp;



		}

		//直接创建查询



		function createQuery(){

		createXMLHttpRequest();//调用创建XMLHttpRequest对象的方法

		xmlHttp.onreadystatechange=callback;//设置回调函数

		 var lb = document.getElementById("lb").value;

		 var nd = document.getElementById("nd").value;

		xmlHttp.open("post","/ods/ssJhwcCTRL-JhwcCTRL-FindAllByND.pfv?lb="+lb+"&&nd="+nd);//向服务器端发送请求

		xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");

		xmlHttp.send(null);

		   }  

		//创建回调函数

		function callback(){

			//设置返回状态和状态码

				if(xmlHttp.readyState==4){

						if(xmlHttp.status==200){

							alert("数据成功删除....");

							 var lb = document.getElementById("lb").value;

							 var nd = document.getElementById("nd").value;

							window.location="/ods/ssJhwcCTRL-JhwcCTRL-FindAllByND.pfv?lb="+lb+"&&nd="+nd;

							}

					}

			}

			

	//  ajax 异步提交方法结束

	}

</script>
...全文
139 17 打赏 收藏 转发到动态 举报
写回复
用AI写文章
17 条回复
切换为时间正序
请发表友善的回复…
发表回复
senloveyunver 2011-01-07
  • 打赏
  • 举报
 回复
学习了..... 现在结贴
Quinn2 2011-01-06
  • 打赏
  • 举报
 回复
后台最后把结果，像这样写out.println（"结果"）看看
Quinn2 2011-01-06
  • 打赏
  • 举报
 回复
不是，你的是java
senloveyunver 2011-01-06
  • 打赏
  • 举报
 回复
后台


public StringBuffer toTable(Iterator itr) {

StringBuffer shuju= new StringBuffer();

result.append("<table width=\"100%\" border=\"1\">");

while (itr.hasNext()) {

THxySscxJhwcbVO vo= (THxySscxJhwcbVO)itr.next();

shuju.append("<tr>");

shuju.append("<td>").append(vo.getSwjg()).append("</td>");

..........

shuju.append("</tr>");

   }

shuju.append("</table>");

return shuju;

}


后台这样写可以么......
Quinn2 2011-01-06
  • 打赏
  • 举报
 回复
跟楼主简化了，就这两个地方注意就可以了，其它的基本不变。希望对楼主有帮助！
Quinn2 2011-01-06
  • 打赏
  • 举报
 回复
也就是说，楼主要注意的步骤就是：1.xmlhttp.open("post","index.aspx?id="+encodeURI(cateid),true); //把用户选择的条件传递到后台
2. document.getElementById("shuju").innerHTML=result;//绑定后台返回来的数据

Quinn2 2011-01-06
  • 打赏
  • 举报
 回复 


<script>

//创建异步对象

function CreateXMLHttp()

{

    //一般都只判断这两种类型的浏览器；

    //判断是不是IE浏览器

    if(window.ActiveXObject)

    {

        return new ActiveXObject("Microsoft.XMLHTTP");

    }

    else//firefox.遨游、或者火狐浏览器；

    {

        return new XMLHttpRequest();

    }

}

var xmlhttp=CreateXMLHttp();

function getdate()

{



    var cateid=document.getElementById("<%=DropDownList1.ClientID %>").value;

    /*

     1.open("请求方式(post或者get)","要传的页面(中转页面)","true表示异步，false表示同步")

     2.如果参数的值为中文时，需要使用encodeURI()进行编码,接收该值的时候并不需要解码；

    */

    //创建一个新的HTTP请求

    xmlhttp.open("post","index.aspx?id="+encodeURI(cateid),true); 

    //发送请求

    xmlhttp.send("");

    //当请求状态发生改变时，去调用showdata函数（回调函数）

    xmlhttp.onreadystatechange=showdata;

    

}

function showdata()

{

    //判断请求是否成功并且已经完全响应结果

    /*

      如果请求结果等4表示请求成功，状态status==200表示ok！

     */

    if(xmlhttp.readyState==4 && xmlhttp.status==200)

    {

       

       /*

         响应结果有两种格式，1.responseText(文本格式) 2.responseXml(XML格式);

        */

       var result=xmlhttp.responseText;

       //获取响应结果

       if(result=="0")

       {

            alert("请求出错！");

            return 

       }

       else

       	    document.getElementById("shuju").innerHTML=result;

    }

}

</script>







后台同上：
senloveyunver 2011-01-06
  • 打赏
  • 举报
 回复
七楼 谢谢啦... 我一直用的都是用MyEclipse做的开发, jquery 没有用过..
Quinn2 2011-01-06
  • 打赏
  • 举报
 回复
就是把参数传递到后台，然后查询出数据。后台把数据返回，绑定就可以了。
上面的例子很详细了，楼主，下去研究下吧，jquery的ajax很简单的，就几步。希望说了这么多，对楼主有帮助。

//传递的路径，已经变量名。传递到后台。
url: "../Ajax/getFlowInfo.aspx?flowid="+flowid,
jamespengo 2011-01-06
  • 打赏
  • 举报
 回复
var ajaxResult;
function createQuery(){
createXMLHttpRequest();//调用创建XMLHttpRequest对象的方法
xmlHttp.onreadystatechange=callback;//设置回调函数
var lb = document.getElementById("lb").value;
var nd = document.getElementById("nd").value;
xmlHttp.open("post","/ods/ssJhwcCTRL-JhwcCTRL-FindAllByND.pfv?lb="+lb+"&&nd="+nd,false);//向服务器端发送请求
xmlHttp.send();
}
//创建回调函数
function callback(){
//设置返回状态和状态码
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
ajaxResult=xmlHttpReq.responseText
}
}
}
你再写个js处理ajaxResult吧

// ajax 异步提交方法结束
}
Quinn2 2011-01-06
  • 打赏
  • 举报
 回复
在后台把表格拼好了，跟这个层加个id<div id="shuju" style="OVERFLOW:auto;width:100%;height:230px">
刚刚只是个例子，楼主像这样就好了。就这么点代码

$.ajax({
url: "../Ajax/getFlowInfo.aspx?flowid="+flowid,
cache: false,
success: function(msg){
if(msg=="")
{
alert("没有数据！");
return;
}
else
{
//把数据添加到层上
$("#shuju").html(msg);

}
}
});
senloveyunver 2011-01-06
  • 打赏
  • 举报
 回复
恩 没怎么用过ajax , 所有寻求大家的帮助,帮小弟解决这个问题....先谢过啦..
Quinn2 2011-01-06
  • 打赏
  • 举报
 回复
还是用jquery吧，简洁明了。




//前台

$.ajax({

              url: "../Ajax/getFlowInfo.aspx?flowid="+flowid,

              cache: false,

              success: function(msg){

                    if(msg=="")

                    {

                        alert("该流程暂无任何步骤信息！");

                        $("#msg").hide();

                        return;

                    }

                    else

                    {

                        $(obj).val("隐藏流程信息");

                        $("#msg").html(msg);

                        $("#msg").css("left",$(obj).offset().left+$(obj).width());

                        $("#msg").css("top",$(obj).offset().top-$("#msg").height()+60);

                        $("#msg").show();

                    }

                }    

            }); 

-----------------------------------------------------------------------

//后台

 if (Request.QueryString["flowid"] != null)

        {

            string flowid = Request.QueryString["flowid"].ToString();

            DataSet ds = FlowManager.GetFlowStep(flowid);

            if (ds != null && ds.Tables.Count > 0 && ds.Tables[0].Rows.Count > 0)

            {

                StringBuilder text = new StringBuilder();

                text.Append("<table>");

                text.Append("<tr><td>步骤</td><td>步骤名称</td>");

                foreach (DataRow dr in ds.Tables[0].Rows)

                {

                    string step = dr["step"].ToString();

                    string stepname = dr["stepname"].ToString();

                    text.Append("<tr><td>" + step + "</td><td>" + stepname + "</td>");

                }

                text.Append("</table>");

                Response.Write(text.ToString());//讲结果写入

                Response.End();//关闭

            }

            else

            {

                Response.Write("");

                Response.End();

            }

        }
Quinn2 2011-01-06
  • 打赏
  • 举报
 回复
function createQuery(){
createXMLHttpRequest();//调用创建XMLHttpRequest对象的方法
xmlHttp.onreadystatechange=callback;//设置回调函数
var lb = document.getElementById("lb").value;
var nd = document.getElementById("nd").value;
xmlHttp.open("post","/ods/ssJhwcCTRL-JhwcCTRL-FindAllByND.pfv?lb="+lb+"&&nd="+nd);//向服务器端发送请求
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xmlHttp.send(null);
}
点击查询的时候，楼主调用的方法，好些没返回数据！楼主的ajax肯定不熟
senloveyunver 2011-01-06
  • 打赏
  • 举报
 回复
下次注意,,,,我现在就是想吧查询出来的数据,循环显示在表格中...
jamespengo 2011-01-06
  • 打赏
  • 举报
 回复
楼主，我不知道你要干嘛
首先你的代码格式是不是可以规范一点 另外你的回调方法中没有看到你要返回的结果
xmlHttpReq.responseText或者xmlHttpReq.responseXML
senloveyunver 2011-01-06
  • 打赏
  • 举报
 回复
回调函数里的alert是我随便写的 为了测试用...
这个大概的意思是.我点击提交的时候如何获得查询出来的数据然后显示到表格中...
查询条件不变,用户选择什么就是什么.我之前写的,已提交回来,页面就从新加载了一次,把用户输入的查询条件就覆盖掉了....
无刷新分页 pagination
Jquery 无刷新分页 jquery.pagination.js 带数据库 提交Handler请求数据 AJAX
Ajax中$.post()和$.ajax()总结
初学AJAx，对于几种写法一直搞不懂， 对于$.ajax(),在官方API文档中是这么说的：   jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。最简单的情况下，$.ajax()可以不带任何参数直接使用...
$.ajax 和$.post的区别
$.ajax({ }) 和$.post()(jQuery对原生ajax的封装)同样都是ajax的异步请求: 原生Json数据交互测试 Json数据交互测试 function sendJson(){ $.ajax({ url:"${pageContext.request.contextPath }/item/jsontest.action", type:"post",
$.ajax()方法详解
目录 1 Ajax操作 1.1 $.ajax 1.2 简便写法 1.2.1 $.get()，$.post() 1.2.2 $.getJSON() 1.2.3 $.getScript() 1.3 Ajax事件 1.4 返回值 1.5 中文乱码 1.5.1 解决方法一 1.5.2 解决方法二 1 Ajax操作 1.1 $.ajax jQuery对象上面还定义了Ajax方法（$.ajax()），用来处理Ajax操作。调用该方法后，浏览器就会向服务器发出一个HTTP请求。 $.aj
ajax下window.location.href页面不跳转问题
ajax下window.location.hre页面不跳转问题(全面详解)
JavaScript

87,904

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章