<button>与<input type="button">在火狐下区别 ajax请求

本文探讨了一个特定的问题:在使用jQuery的.post方法发送AJAX请求时,请求能够成功发送,但在Firefox浏览器中无法得到响应。作者发现将按钮元素从&lt;button&gt;更改为&lt;input type=&quot;button&quot;&gt;后,问题得到了解决。
今天在学习ssm 碰上了这样一个问题    使用jq.post发送ajax请求   请求内容已经发送过去   但是action并没响应该事件,其他浏览器都可以正常发送 响应   就是在火狐里面这个响应不了


我在jsp里面onclick标签使用的是<button>  后来我误打误撞把<button>改成<input type="button">action却响应了  


不知道什么原因   求指教
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>1-用户登录</title> <style type="text/css"> a{text-decoration:none} body{ background-image:url(../img/longmao.webp); background-size: cover; height: 100vh; } h3{ color:#FFF; font-size:30px; } td{ color:#FFF; font-size:20px; } .ps{ padding-top:0px; } </style> <script type="text/javascript"> function refreshVerifyCode() { // 刷新验证码 var verifyCodeImage = document.getElementById("verify_codeImage"); verifyCodeImage.src = "../VerifyCodeServlet?" + Math.random(); } function register() { window.location.href = "register.jsp"; } </script> </head> <body > <h3>新闻发布系统>>用户管理>>登录</h3><hr color="#FFF"> <div class="ps"> <form action="../LoginSerlvet" method="post" name="frm_login"> <table align="center"> <tr> <td>用户名:</td> <td> <input type="text" name="userName"value="张凯"> </td> </tr> <tr> <td>密码:</td> <td> <input type="password" name="userPassword" value="1111"> </td> </tr> <tr> <td>验证码:</td> <td> <input type="text" name="verifyCode" value=""> <img src="../VerifyCodeServlet?t=<%=System.currentTimeMillis()%>" id="checkcode" onclick="this.src='../VerifyCodeServlet?t='+new Date().getTime()"/> </td> </tr> <tr> <td height="50" colspan="2" align="center"> <input type="submit" name="ok" value="提交"> <input type="reset" name="cancel" value="取消"> <input type="button" onclick="register();" value="注册"> </td> </tr> </table> </form> </div> </body> </html>加一个3.Ajax异步验证。登录时账号输完马上显示账号重复了。
06-08
<form id="inputForm" action="update.jhtml" method="post" type="ajax" validate-type="validate" style="width: 100%"> <input type="hidden" name="id" value="${followUpRecord.id}" /> <div class="tabContent"> <table class="input input-edit"> <tr> <th> <span class="requiredField">*</span>${message("跟进类型")}: </th> <td colspan="2"> <select class="text followType" name="followType" id="followType" required btn-fun="clear"> <option value="">--请选择--</option> <option value="1" [#if followUpRecord.followType == 1] selected [/#if]>商机跟进</option> <option value="2" [#if followUpRecord.followType == 2] selected [/#if]>客户跟进</option> </select> </td> <th> <span class="requiredField">*</span>${message("跟进对象")}: </th> <td colspan="2"> <span class="search" style="position:relative"> <input type="hidden" id="objId" name="objId" class="text objId" value="${followUpRecord.objId}" btn-fun="clear" required/> <input type="text" id="objName" name="objName" class="text objName" value="${followUpRecord.objName}" onkeyup="clearSelect(this)" required/> <input type="button" class="iconSearch" value="" id="selectObj"> </span> </td> <th class="t_projectStageValue" style="display: none;"> ${message("商机阶段")}: </th> <td class="t_projectStageValue" style="display: none;"> <input type="text" name="projectStageValue" class="text projectStageValue" maxlength="200" value="${followUpRecord.projectStageValue}"/> </td> <th> <span class="requiredField">*</span>${message("状态")}: </th> <td colspan="2"> <select class="text recordStatus" name="recordStatus" required btn-fun="clear" style="pointer-events: none;background-color: #f7f7f7"> <option value="1" [#if followUpRecord.recordStatus == 1] selected [/#if]>未提交</option> <option value="2" [#if followUpRecord.recordStatus == 2] selected [/#if]>已提交</option> <option value="3" [#if followUpRecord.recordStatus == 3] selected [/#if]>审批中</option> </select> </td> </tr> <tr> <th> ${message("标段划分")}: </th> <td> <input type="text" name="sectionDivision" class="text sectionDivision" maxlength="200" /> </td> <th> ${message("跟进阶段")}: </th> <td> <select class="text followUpState" name="followUpState" id="followUpState" required btn-fun="clear"> <option value="">--请选择--</option> [#list followUpStates as followUpState] <option value="${followUpState.value}" [#if followUpRecord.followUpState == followUpState.value] selected [/#if] >${followUpState.remark}</option> [/#list] [#-- <option value="1" [#if followUpRecord.followUpState == 1] selected [/#if]>发现阶段</option>--] [#-- <option value="2" [#if followUpRecord.followUpState == 2] selected [/#if]>客户接触阶段</option>--] [#-- <option value="3" [#if followUpRecord.followUpState == 3] selected [/#if]>需求了解阶段</option>--] [#-- <option value="4" [#if followUpRecord.followUpState == 4] selected [/#if]>评估阶段</option>--] </select> </td> <th> ${message("是否关闭商机")}: </th> <td> <select class="text isCloseNiche" name="isCloseNiche" id="isCloseNiche" required btn-fun="clear"> <option value="">--请选择--</option> <option value="1" [#if followUpRecord.isCloseNiche == 1] selected [/#if]>否</option> <option value="2" [#if followUpRecord.isCloseNiche == 2] selected [/#if]>是</option> </select> </td> </tr> <tr> <th> ${message("项目进度详细描述")}: </th> <td colspan=" 10" style="width: 95%"> <textarea name="projectScheduleDescription" class="text projectScheduleDescription" cols="30" rows="2"/>${followUpRecord.projectScheduleDescription}</textarea> </td> </tr> <tr> <th> ${message("项目运作思路及关键点")}: </th> <td colspan="10" style="width: 95%"> <textarea name="ideaPoint" class="text ideaPoint" cols="30" rows="2"/>${followUpRecord.ideaPoint}</textarea> </td> </tr> <tr> <th> ${message("下一步工作计划")}: </th> <td colspan="10" style="width: 95%"> <textarea name="nextPlan" class="text nextPlan" cols="15" rows="2"/>${followUpRecord.nextPlan} </textarea> </td> </tr> <tr> <th> ${message("需公司其他部门支撑事项")}: </th> <td colspan="10" style="width: 95%"> <textarea name="needBackup" class="text needBackup" cols="15" rows="2"/>${followUpRecord.needBackup}</textarea> </td> </tr> <tr> <th> <span class="requiredField">*</span>${message("总结")}: </th> <td colspan="10" style="width: 95%"> <textarea cols="20" rows="2" name="sumUp" class="text sumUp" required/>${followUpRecord.sumUp} </textarea> </td> </tr> <tr style="display: none" class="t_closeResult"> <th> <span class="requiredField" >*</span>${message("商机关闭原因")}: </th> <td colspan=" 10" style="width: 95%"> <textarea name="closeResult" class="text closeResult" cols="30" rows="2" [#if followUpRecord.isCloseNiche == 2] required [/#if]/>${followUpRecord.closeResult}</textarea> </td> </tr> <tr> <th>${message("图片")}</th> <td colspan="10" style="width: 95%"> <div class="box-wrap"> <div class="box-main" style="overflow:visible;"> <div class="upload-list tc" style="overflow:initial;width:260px;"> [#list followUpRecord.images as image] <div class="ul-box" style="padding:13px 0px 0px"> <div class="pic" style="margin-left:65px; width:80px"><a href="${image.source}" target="_blank"><img src="${image.thumbnail}"></a></div> <b> </b> <a class="del delProductImage1" href="#"></a> <input type="hidden" name="images[${image_index}].title" value="${image.title}"> <input type="hidden" name="images[${image_index}].source" value="${image.source}"> <input type="hidden" name="images[${image_index}].large" value="${image.large}"> <input type="hidden" name="images[${image_index}].medium" value="${image.medium}"> <input type="hidden" name="images[${image_index}].thumbnail" value="${image.thumbnail}"> </div> [/#list] <a href="javascript:;" class="a-upload" id="addProductImage"></a> </div> </div> </div> </td> </tr> </table> <div> <table> <tr> <th>111</th> <td> <textarea rows="2" cols="30"></textarea> </td> </tr> </table> </div> <div class="task-content"> [#include "/crm/follow_up_record/edit/task-form.ftl" /] </div> <br/> <div class="title-style"> 附件上传: <div class="btns"> <a href="javascript:;" id="addAttach" class="button">添加附件</a> </div> </div> <table id="table-attach"></table> <div class="title-style"> 抄送人: <div class="btns"> <a href="javascript:;" id="addMember" class="button">添加抄送人</a> </div> </div> <table id="table-addMember"></table> <div class="title-style"> 定位:提示:你可以放大地图以便更准确标记。 </div> <div> <table class="input tabContent"> <tr> <td colspan="4" style="line-height: 25px;padding: 5px;border-bottom: 1px solid #dde9f5;"> <!-- <span class="fieldSet"> <input type="hidden" id="areaId" name="areaId" /> </span>   详细地址:<input type="text" name="address" class="txt" maxlength="200"/> --> <br/> 定位地址:<input type="text" id="searchText" style="line-height: 20px;width: 400px;border: solid 1px #dcdcdc;"/> <input type="button" value="搜索" id="searchButton" style="border: revert;"/>    详细地址:<input type="text" id="address" name="address" readonly="readonly" value="${followUpRecord.address}" style="line-height: 20px;width: 400px;border: solid 1px #dcdcdc;"/> 经度:<input type="text" name="longitude" id="mapy" readonly="readonly" value="${followUpRecord.longitude}" style="line-height: 20px;border: solid 1px #dcdcdc;"/>   纬度:<input type="text" name="latitude" id="mapx" readonly="readonly" value="${followUpRecord.latitude}" style="line-height: 20px;border: solid 1px #dcdcdc;"/> </td> </tr> <tr> <td style="height:400px;display:block;" colspan="3"> <div id="allmap"></div> </td> <td style="height:400px;"> <ul id="searchResUl"> </ul> </td> <tr> </table> </div> </div> <div class="fixed-top"> [#if followUpRecord.recordStatus == 1] [#if followUpRecord.isCloseNiche != 2] <a href="javascript:void(0);" class="button sureButton" onclick="submitData(this)">${message("提交")}</a> [/#if] <a href="javascript:void(0);" class="button sureButton" onclick="save(this)">${message("保存")}</a> [#if followUpRecord.isCloseNiche == 2 && followUpRecord.wfState == 0] <a href="javascript:void(0);" class="button sureButton" onclick="check_wf(this)">${message("12501")}</a> [/#if] [/#if] <input type="button" onclick="location.reload(true);" class="button resetButton ml15" value="${message("重置")}"> </div> </form>修改该代码 使得文本框能使用回车换行并出现滚动条
07-31
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <style> /* styles.css */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f2f2f2; } h1 { margin: 0; } main { max-width: 800px; margin: 20px auto; padding: 20px; background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } #box { display: flex; flex-direction: column; align-items: center; } .buttons { margin-bottom: 20px; } button { padding: 10px 20px; margin-right: 10px; background-color: #333; color: #fff; border: none; border-radius: 4px; cursor: pointer; } .background-div { margin-bottom: 20px; } .background-btn { padding: 10px 20px; background-color: #333; color: #fff; border: none; border-radius: 4px; cursor: pointer; } .content { width: 80%; background-color: #f9f9f9; padding: 20px; } h2 { margin-top: 0; } #todo-form { display: flex; justify-content: center; align-items: center; margin-bottom: 10px; gap: 10px; } .input-field { padding: 10px; flex: 1; } .submit-btn { padding: 10px 20px; background-color: #333; color: #fff; border: none; border-radius: 4px; cursor: pointer; } .list { height: 400px; } .item { height: 40px; border-radius: 4px; line-height: 40px; padding: 8px; margin-bottom: 8px; background-color: #eee; } .item:hover { background-color: #ccc; } .hidden { display: none; } #myCanvas { /* display: none; */ } </style> <body> <main> <div class="buttons"> <button class="start-btn" id="start-btn">开始录制</button> <button class="pause-btn">暂停录制</button> <button class="resume-btn">继续录制</button> <button class="stop-btn" id="stop-btn">结束录制</button> </div> <div id="box"> <video width="100%" height="100" src="抖音-记录美好生活.mp4" autoplay controls></video> <section class="content"> <h2>TODO LIST</h2> <div class="background-div"> <button class="background-btn">切换背景颜色</button> </div> <div id="todo-form"> <input type="text" class="input-field" placeholder="输入待办事项" /> <button type="submit" class="submit-btn">提交</button> </div> <div class="list"></div> </section> <canvas id="myCanvas"></canvas> </div> <img src="" alt="" class="hidden" /> </main> <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> <script> // 假设我们有一个目标元素 #target 和一个用于绘制的 canvas 元素 #myCanvas const target = document.getElementById('box'); const canvas = document.getElementById('myCanvas'); const startBtn = document.getElementById('start-btn'); const stopBtn = document.getElementById('stop-btn'); let mediaRecorder; let recordedChunks = []; let animationId; let stream; async function captureCanvas() { try { // 使用html2canvas捕获目标元素 const canvasElement = await html2canvas(target); const ctx = canvas.getContext('2d'); // 将捕获的内容绘制到canvas上 canvas.width = canvasElement.width; canvas.height = canvasElement.height; ctx.drawImage(canvasElement, 0, 0); } catch (error) { console.error('捕获失败:', error); } } // 开始录制 startBtn.addEventListener('click', async () => { recordedChunks = []; // 先绘制一次,确保canvas有内容 await captureCanvas(); // 获取canvas的媒体流,设置帧率(例如30fps) stream = canvas.captureStream(30); mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm;codecs=vp9' }); mediaRecorder.ondataavailable = event => { if (event.data.size > 0) { recordedChunks.push(event.data); } }; mediaRecorder.onstop = () => { // 合并数据并生成视频文件 const blob = new Blob(recordedChunks, { type: 'video/webm' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'recorded.webm'; a.click(); // 释放资源 stream.getTracks().forEach(track => track.stop()); URL.revokeObjectURL(url); }; mediaRecorder.start(); // 开始循环绘制,以保持视频流的持续生成 function updateCanvas() { captureCanvas().then(() => { animationId = requestAnimationFrame(updateCanvas); }); } updateCanvas(); }); // 停止录制 stopBtn.addEventListener('click', () => { mediaRecorder.stop(); cancelAnimationFrame(animationId); }); </script> </body> </html> 以上代码在html2canvas转视频是如何收录视频和音频,请给出一个完整的案例
最新发布
08-15
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值