JQuery实现Ajax 根据商品名称自动显示价格

简介: 数据库字段:Id(主键,自增),Name(商品名称),Price(商品单价)添加数据集DataSetProducts ,添加方法:GetDataByName() ----->对应SQL:SELECT id, name, price FROM dbo.

数据库字段:Id(主键,自增),Name(商品名称),Price(商品单价)

添加数据集DataSetProducts ,添加方法:GetDataByName()

----->对应SQL:

SELECT  id, name, price  FROM  dbo.T_Product
where  name  =   @name

 

 新建一般处理程序:GetPrice.ashx

代码:

 

using  System;
using  System.Collections.Generic;
using  System.Linq;
using  System.Web;
using  AJAX.DataSetProductsTableAdapters;

namespace  AJAX
{
    
///   <summary>
    
///  GetPrice 的摘要说明
    
///   </summary>
     public   class  GetPrice : IHttpHandler
    {

        
public   void  ProcessRequest(HttpContext context)
        {
            context.Response.ContentType 
=   " text/plain " ;
            
string  name  =  context.Request[ " name " ];

            var data 
=   new  T_ProductTableAdapter().GetDataByName(name); //调用DataSet中的方法
            
if  (data.Count  <=   0 )
            {
                context.Response.Write(
" none|0 " );    // 竖线左边是返回状态,右边是价格
            }
            
else
            {
                context.Response.Write(
" ok| "   +  data.Single().price);  // 我们自己定义的协议格式 ok可以换成其他的字符串;
            }
        }

        
public   bool  IsReusable
        {
            
get
            {
                
return   false ;
            }
        }
    }
}

Html页面代码:

<! 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 >
    
< title > Ajax完成查询价格 </ title >
    
< script  src ="Scripts/jquery-1.4.1.js"  type ="text/javascript" ></ script >
    
< script  language ="javascript"  type ="text/javascript" >
        $(
function  () {
            $(
" #Text1 " ).blur( function  () {
                
var  name  =  $( " #Text1 " ).val();
                $.post(
" GetPrice.ashx " , {  " name " : name },  function  (data, statusText) {
                    
if  (statusText  ==   " success " ) {
                        
var  atts  =  data.split( " | " );
                        
if  (atts[ 0 ==   " ok " ) {    // atts[0]是参数;表示状态;  
                            $( " #Text2 " ).val(atts[ 1 ]); //atts[1]是参数,表示价格;
                        } 
else   if  (atts[ 0 ==   " none " ) {
                            $(
" #Text2 " ).val( " 没有这个商品 " );
                        } 
else  {
                            alert(
" 返回格式错误 " );
                        }
                    } 
else  {
                        alert(
" Ajax错误! " );
                    }
                });
            });
        });
    
</ script >
</ head >
< body >
    查询名称:
< input  id ="Text1"  type ="text"   />< br  />
    
< br  />
    价
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 格: < input  id ="Text2"  type ="text"   />
</ body >
</ html >

 

目录
相关文章
N..
|
7月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
69 1
|
7月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
81 0
|
6月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
49 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
|
2月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
111 1
|
3月前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
35 1
|
3月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
3月前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
24 1
|
4月前
|
前端开发 JavaScript Java
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
关于如何在SpringBoot项目中结合JQuery和Ajax实现表单数据的传输以及单文件或多文件上传的教程。文章提供了完整的前后端示例代码,包括项目的`pom.xml`依赖配置、SpringBoot的启动类`App.java`、静态资源配置`ResourceConfig.java`、配置文件`application.yml`、前端HTML页面(单文件上传和多文件上传加表单内容)以及后端控制器`UserController.java`。文章最后展示了运行结果的截图。
231 0
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
|
4月前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
34 0
|
4月前
|
JavaScript 前端开发
Ajax的使用(jquery的下载)
这篇文章是关于Ajax学习笔记的分享,包括JQuery的下载方式、Ajax的主要参数说明,以及如何在网页中使用Ajax进行异步请求的示例代码。