开启辅助访问
切换到宽版

天天ASP家园官方Q群

天天ASP家园网友互动群

群1: 697497501(新手学习互助群)

群2: 47598123(进阶应用群)

天天ASP家园»论坛 › 技术交流 › 前端技术 › 各位大拿，jqurry ajax ，在asp数据如何接收？
返回列表 发新帖
查看: 1024|回复: 6

[问与答] 各位大拿，jqurry ajax ，在asp数据如何接收？

[复制链接]
老李 发表于 2022-11-21 11:46:03 | 显示全部楼层 |阅读模式
前端：一定要用post方法，因为数据比较大

$("button").click(function(){
    $.post("get.asp",
    {
        g_name:"王大拿",
        g_grad:"三年级"
    },
    function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });
});

后端get.asp中， g_name值怎么接收？ 我下面的方法得不到数据

<%   
g_name=request("g_name")
response.write g_name

%>

ASP币如何冲？请看这里
回复

使用道具 举报

xuanxiao 发表于 2022-11-21 14:11:55 | 显示全部楼层
数据比较大是什么意思？


  2. $.ajax({
  3.     type: "GET",
  4.     url: "page.asp",
  5.     dataType:'json',
  6.     data: {id:1001},//也可以是字符串链接"id=1001"，建议用对象
  7.     success: function(data){
  8.         console.log("返回的数据: " + data );
  9.     }
  10. });
复制代码


参考代码 你试试
ASP币如何冲？请看这里
回复 支持 反对

使用道具 举报

 楼主| 老李 发表于 2022-11-21 15:45:07 | 显示全部楼层
感谢回复！
我在弄一个头像剪裁工具crooperjs + ajax 的头像上传功能
头像剪裁下来，生成base64的数据，数据比较大，有时很多兆！！ 用过get方法，获取的数据不全，生成的图片是马赛克的不全图像！！
所以必须得采用 post 方法
现在调试完成两步
1、前端截图没问题，生成bas64 没问题
2、后端，将base64de数据前端打印出来，直接放在后端，生成图片没问题
现在卡在， 如何将前端得base64数据，通过ajax 上传后端！ 后端获取到前面base 64得值！！ 获取到了，整个就跑通了！
ASP币如何冲？请看这里
回复 支持 反对

使用道具 举报

 楼主| 老李 发表于 2022-11-21 15:55:22 | 显示全部楼层
  1. <!DOCTYPE html>

  3. <html lang="en">

  5.     <head>
  6.        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7.         <title>基于cropper.js的图片裁剪</title>
  8.         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  9.         <meta name="format-detection" content="telephone=no">
  10.         <link rel="stylesheet" href="css/cropper.min.css">
  11.         <link rel="stylesheet" href="css/ImgCropping.css">
  12.         <script src="js/jquery-2.1.1.js"></script>
  13.         <script src="js/cropper.min.js"></script>

  15.         <style>
  16.             .str {
  17.                 width: 150px;
  18.                 height: 200px;
  19.                 border: solid 1px #e3e3e3;
  20.                 padding: 5px;
  21.                 margin-top: 10px
  22.             }
  23.         </style>
  24.         
  25.     </head>

  27.     <body>
  28.          <label title="上传图片" for="chooseImg" class="l-btn choose-btn">
  29.          <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg" class="hidden" onchange="selectImg(this)">
  30.                     选择图片
  31.          </label>
  32.         <div class="str">
  33.             <img id="finalImg" src="" width="100%">
  34.         </div>
  35.       

  37.         <!--图片裁剪框 start-->
  38.         <div style="display: none" class="tailoring-container">
  39.             <div class="black-cloth" onclick="closeTailor(this)"></div>
  40.             <div class="tailoring-content">
  41.                 <div class="tailoring-content-one">

  43.                     <div class="close-tailoring" onclick="closeTailor(this)">×</div>
  44.                 </div>

  46.                 <div class="tailoring-content-two">
  47.                     <div class="tailoring-box-parcel">
  48.                         <img id="tailoringImg">
  49.                     </div>
  50.                     <div class="preview-box-parcel">
  51.                         <p>图片预览：</p>
  52.                         <div class="square previewImg"></div>
  53.                         <!--  <div class="circular previewImg"></div>-->
  54.                     </div>
  55.                 </div>

  57.                 <div class="tailoring-content-three">
  58.                     <button class="l-btn cropper-reset-btn">复位</button>
  59.                     <button class="l-btn cropper-rotate-btn">旋转</button>
  60.                     <button class="l-btn cropper-scaleX-btn">换向</button>
  61.                     <button class="l-btn sureCut" id="sureCut">确定</button>
  62.                 </div>
  63.             </div>
  64.         </div>
  65.         <!--图片裁剪框 end-->

  67.    
  68.         <script src="js/cropper.min.js"></script>
  69.            <script type="text/javascript">  
  70.     //弹出框水平垂直居中  
  71.     (window.onresize = function() {  
  72.         var win_height = $(window).height();  
  73.         var win_width = $(window).width();  
  74.         if (win_width <= 768) {  
  75.             $(".tailoring-content").css(  
  76.                     {  
  77.                         "top" : (win_height - $(".tailoring-content")  
  78.                                 .outerHeight()) / 2,  
  79.                         "left" : 0  
  80.                     });  
  81.         } else {  
  82.             $(".tailoring-content").css(  
  83.                     {  
  84.                         "top" : (win_height - $(".tailoring-content")  
  85.                                 .outerHeight()) / 2,  
  86.                         "left" : (win_width - $(".tailoring-content")  
  87.                                 .outerWidth()) / 2  
  88.                     });  
  89.         }  
  90.     })();  
  91.       
  92.     // 选择文件触发事件  
  93.     function selectImg(file) {  
  94.         //文件为空，返回  
  95.         if (!file.files || !file.files[0]) {  
  96.             return;  
  97.         }  
  98.         $(".tailoring-container").toggle();  
  99.         var reader = new FileReader();  
  100.         reader.onload = function(evt) {  
  101.             var replaceSrc = evt.target.result;  
  102.             // 更换cropper的图片  
  103.             $('#tailoringImg').cropper('replace', replaceSrc, false);// 默认false，适应高度，不失真  
  104.         }  
  105.         reader.readAsDataURL(file.files[0]);  
  106.     }  
  107.     // cropper图片裁剪  
  108.     $('#tailoringImg').cropper({  
  109.         aspectRatio : 5 / 7,// 默认比例  
  110.         preview : '.previewImg',// 预览视图  
  111.         guides : false, // 裁剪框的虚线(九宫格)  
  112.         autoCropArea : 0.8, // 0-1之间的数值，定义自动剪裁区域的大小，默认0.8  
  113.         movable : false, // 是否允许移动图片  
  114.         dragCrop : true, // 是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域  
  115.         movable : true, // 是否允许移动剪裁框  
  116.         resizable : true, // 是否允许改变裁剪框的大小  
  117.         zoomable : false, // 是否允许缩放图片大小  
  118.         mouseWheelZoom : false, // 是否允许通过鼠标滚轮来缩放图片  
  119.         touchDragZoom : true, // 是否允许通过触摸移动来缩放图片  
  120.         rotatable : true, // 是否允许旋转图片  
  121.         crop : function(e) {  
  122.             // 输出结果数据裁剪图像。  
  123.         }  
  124.     });  
  125.     // 旋转  
  126.     $(".cropper-rotate-btn").on("click", function() {  
  127.         $('#tailoringImg').cropper("rotate", 45);  
  128.     });  
  129.     // 复位  
  130.     $(".cropper-reset-btn").on("click", function() {  
  131.         $('#tailoringImg').cropper("reset");  
  132.     });  
  133.     // 换向  
  134.     var flagX = true;  
  135.     $(".cropper-scaleX-btn").on("click", function() {  
  136.         if (flagX) {  
  137.             $('#tailoringImg').cropper("scaleX", -1);  
  138.             flagX = false;  
  139.         } else {  
  140.             $('#tailoringImg').cropper("scaleX", 1);  
  141.             flagX = true;  
  142.         }  
  143.         flagX != flagX;  
  144.     });  
  145.       
  146.     // 确定按钮点击事件  
  147.     $("#sureCut").on("click", function() {  
  148.         if ($("#tailoringImg").attr("src") == null) {  
  149.             return false;  
  150.         } else {  
  151.             var cas = $('#tailoringImg').cropper('getCroppedCanvas');// 获取被裁剪后的canvas
  152.                         //console.log(cas);   
  153.                        
  154.             var base64 = cas.toDataURL('image/jpeg'); // 转换为base64  
  155.                         //console.log(base64);  
  156.       
  157.             $("#finalImg").prop("src", base64);// 显示图片
  158.                         //console.log(encodeURIComponent(base64));  
  159.             uploadFile(encodeURIComponent(base64))//编码后上传服务器  
  160.                        
  161.             closeTailor();// 关闭裁剪框  
  162.             }  
  163.         });  
  164.       
  165.         // 关闭裁剪框  
  166.         function closeTailor() {  
  167.             $(".tailoring-container").toggle();  
  168.         }  
  169.                
  170.         function uploadFile(file){
  171.             $.ajax({
  172.                 url:"save_pic.asp",
  173.                 data:"picture=" + file,
  174.                 dataType:"json",
  175.                 type:"post",
  176.             processData: false, // 告诉jQuery不要去处理发送的数据
  177.             //contentType: application/json, // 告诉jQuery不要去设置Content-Type请求头
  178.                 success:function(data,status){
  179.                         alert("数据: \n" + data + "\n状态: " + status);
  180.                         }
  181.                 ,
  182.                 error:function(xhr){
  183.                         alert("错误提示： " + xhr.status + " " + xhr.statusText);
  184.                         }
  185.                 })
  186.                 }

  188.       
  189.     </script>  

  191.     </body>

  193. </html>
复制代码
ASP币如何冲？请看这里
回复 支持 反对

使用道具 举报

 楼主| 老李 发表于 2022-11-21 15:57:39 | 显示全部楼层
本帖最后由 老李 于 2022-11-21 15:59 编辑

  2. <%

  4. '
  5. Dim Subfolder,picture,path

  7. Subfolder=year(now)&month(now)&day(now)&hour(now)&minute(now)&second(now()) ''生成当天的子文件夹的名称



  11. picture=request("picture")
  12. 'response.Write"pitcture_1<br>"&picture&"pic_name="&pic_name
  13. picture=URLDecoder(picture)
  14. 'response.Write "pitcture_Urldecoder<br>"&picture&"<br>"

  16. picture=replace(picture,"data:image/jpeg;base64,","")
  17. 'response.Write "pitcture_nobase64<br>"&picture&"<br>"
  18. '
  19. path=Subfolder&".jpg"
  20. response.Write picture
  21. dim xmlstr
  22. xmlstr="<data>"&picture&"</data>"
  23. Dim xml : Set xml=Server.CreateObject("MSXML2.DOMDocument")
  24. Dim stm : Set stm=Server.CreateObject("ADODB.Stream")
  25. xml.resolveExternals=False
  26. xml.loadxml(xmlstr)
  27. xml.documentElement.setAttribute "xmlns:dt","urn:schemas-microsoft-com:datatypes"
  28. xml.documentElement.dataType = "bin.base64"
  29. stm.Type=1 'adTypeBinary
  30. stm.Open
  31. stm.Write xml.documentElement.nodeTypedValue
  32. stm.SaveToFile Server.MapPath(path)
  33. stm.Close
  34. Set xml=Nothing
  35. Set stm=Nothing
  36. response.Write path


  39. FUNCTION URLDecoder(str)
  40.     Dim objScript
  41.     Set objScript = Server.CreateObject("ScriptControl")
  42.     objScript.Language = "JavaScript"
  43.     URLDecoder = objScript.Eval("decodeURIComponent(""" & str & """.replace(/\+/g,"" ""))")
  44.     Set objScript = NOTHING
  45. END FUNCTION


  48. 'Response.Write "{""state"":""1"",""msg"":""小时处"",""Ajax"":"""&picture&"""}"
  49. 'response.Write "{state:""1"",msg:""车公告"",picture="""&picture&"""}"


  52. %>
复制代码
ASP币如何冲？请看这里
回复 支持 反对

使用道具 举报

 楼主| 老李 发表于 2022-11-21 16:02:09 | 显示全部楼层
可以下载附件
直接在上边调试！！

cooperjs头像上传.zip

68.55 KB, 下载次数: 1, 下载积分: 威望 1 个
ASP币如何冲？请看这里
回复 支持 反对

使用道具 举报

xuanxiao 发表于 2022-11-22 13:15:04 | 显示全部楼层
H5上传源码ASP版
http://bbs.ttasp.com/thread-9039-1-1.html
(出处: 天天ASP家园)

就是一个普通的传图功能，这里非常详细了
ASP币如何冲？请看这里
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表

在线客服

售前咨询
售后咨询
服务热线
023-58418553
微信公众号