`
gwh_08
  • 浏览: 335374 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ajax实现表单提交

    博客分类：
  • js
 
阅读更多

表单的提交习惯了<form> submit但是页面刷新跳转的方式。但是在实际项目开发过程，由于特殊的业务场景，需要将submit提交的<form>方式，改为ajax方式提交。

ajax实现没得说，code，ajax函数就OK了，但是在提交时，“点击”按钮调用ajax函数没问题，但是如何实现“回车”提交（即也调用ajax函数）呢？

代码实现方式：

<html>
<head>
<script type="text/javascript">


function enterto(evt){
  var evt=evt?evt:(window.event?window.event:null);//兼容IE和FF
  if (evt.keyCode==13){
  myajax();
}
}

function myajax(){
//---------------
  alert("111")
}


</script>
</head>
<body>
文本1:<input type="text" name="test" onkeydown="enterto(event);"/>

文本2:<input type="text" name="test2" onkeydown="enterto(event);"/>
文本3:<input type="text" name="test3" onkeydown="enterto(event);"/>  
<button name="aa" onclick="myajax();">提交</button>
</body>
</html>
分享到：
| 深入理解JavaScript的变量作用域
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ajax 无刷新实现表单提交

    简单的ajaxt无刷新实现表单提交的实例（myeclipse 直接导入运行） 学习点： 1；ajax无刷新表单提交 2；ajax的运行历程 最简单明了的实例，清晰的帮你弄清上述概念，运行简单，只需解压该包，然后Myeclipse中file - ...

    ajax提交表单到后台

    // 阻止默认的表单提交行为 var formData = $(this).serialize(); // 获取表单数据 $.ajax({ url: 'submitForm', // 后端接口URL type: 'POST', data: formData, dataType: 'json', success: function...

    利用ajax提交表单完整流程

    console.log('表单提交成功，响应：', xhr.responseText); } else if (xhr.status &gt;= 400) { // 错误处理 console.error('表单提交失败，状态码：', xhr.status); } }; xhr.send(formData); // 发送请求 } ``...

    vue12ajax提交表单

    在Vue.js框架中，提交表单是一个常见的任务，特别是在与后端进行数据交互时，我们通常会使用Ajax技术来实现异步通信。Vue.js结合Ajax（通常指的是jQuery的$.ajax或者现代浏览器的fetch API）可以创建高效且用户体验...

    ajax提交表单小例子

    在网页开发中，AJAX（Asynchronous JavaScript ...通过这种方式，我们可以实现异步表单提交，提高用户体验，同时避免了全页刷新带来的不便。这个例子展示了如何在实际开发中解决这个问题，为后续的AJAX应用打下基础。

    ajax验证并提交表单的两种方法博客源码

    本资源通过ajax实现对提交的form表单的验证，该代码不但有针对property验证，也有针对object验证，还有一个异步获取对象的实例；包含完整的代码和库文件；在myeclipse8.5和apache-tomcat-6.0.30测试通过；访问网址：...

    完成的 Ajax 提交表单

    总结来说，本示例的"完成的Ajax提交表单"展示了如何使用Ext JS结合Ajax技术，实现无刷新的表单提交，提高Web应用的响应速度和用户体验。通过理解和实践这些知识点，开发者可以更好地构建交互性更强的Web应用程序。

    Ajax使用jQuery提交表单 文件

    在表单提交的场景下，我们通常使用`$.ajax()`的简写形式`$.post()`或`$.get()`，具体取决于是POST还是GET提交方式。当然，这里我们将主要讨论POST方法，因为表单提交通常涉及向服务器发送数据。 ```javascript // ...

    使用Ajax方法实现Form表单的提交及注意事项

    在本知识点中，我们将详细讨论如何利用Ajax实现表单提交，并阐明在此过程中需要注意的几个关键事项。 首先，了解传统的表单提交机制是很有必要的。在不使用Ajax的情况下，当用户在网页表单上点击提交按钮时，表单...

    ajax提交form表单和上传图片

    通过以上步骤，你可以实现一个高效、友好的Ajax表单提交和图片上传功能。这种方法不仅提高了用户体验，也使得前后端的交互更为顺畅。在实际项目中，还可以根据需求添加错误处理和进度条显示等功能，以提升用户体验。

    使用jQuery ajax提交表单代码

    // 阻止默认表单提交行为 var formData = $(this).serialize(); // 获取表单数据 $.ajax({ url: 'your_server_endpoint.php', // 服务器端接口 type: 'POST', data: formData, dataType: 'json', success: ...

    ajax方式提交表单，全局提交

    "ajax方式提交表单，全局提交"这个主题涉及到的是如何利用AJAX来实现表单数据的异步提交，从而避免页面刷新，提高用户交互性。 AJAX表单提交的核心在于使用JavaScript库，比如jQuery，来处理表单的提交事件。在提供...

    jquery ajaxfrom表单提交代码

    本篇文章将详细介绍如何使用jQuery的`ajaxForm()`方法来实现表单的Ajax提交。 首先，让我们理解`ajaxForm()`的基本用法。在HTML中，你需要有一个表单元素，例如： ```html 用户名" required&gt; 密码" required&gt; ...

    Asp+ajax提交表单实例

    在HTML表单中，我们可以添加一个事件监听器，例如“onsubmit”，当表单提交时触发Ajax请求。下面是一个简单的例子： ```html 提交" onclick="submitForm()" /&gt; function submitForm() { var form = ...

    ajax提交表单

    ### AJAX提交表单知识点详解 ...通过以上介绍，我们可以看出使用jQuery实现AJAX表单提交不仅能够提高用户的体验，还能有效减轻服务器的压力。同时，在实际应用中还需注意安全性、用户体验等方面的问题。

    ajaxForm异步提交表单（含图片）

    AjaxForm是jQuery Form Plugin的一个功能，用于实现异步表单提交，特别是处理包含图片在内的复杂数据。本文将深入探讨如何使用ajaxForm进行异步表单提交。 首先，让我们了解什么是Ajax。AJAX（Asynchronous ...

    ajax实现提交时校验表单方法

    本文实例为大家分享了ajax提交时校验表单的方法，供大家参考，具体内容如下 方法一： 代码示例：  巧妙设计之处：ajax提交的话，不能够进行校验拦截，设置一个flag来判断，很巧妙的设计之处，故收藏！ function ...

    ajax异步提交表单

    通过上述分析，我们可以看到如何使用jQuery实现简单的AJAX表单提交功能。这种技术可以有效地减少页面刷新次数，提高用户的交互体验。同时，需要注意正确设置请求参数，合理处理请求的成功和失败情况，以及选择合适的...

    ajax提交form表单

    在IT领域，特别是Web开发中，使用Ajax（Asynchronous JavaScript and XML）进行form表单的无...通过以上分析，我们对如何使用Ajax实现表单的无刷新提交有了全面的理解，这对于现代Web开发来说是一项非常实用的技能。

    php+ajax表单无刷新验证

    PHP与AJAX（Asynchronous JavaScript and XML）结合的表单验证技术可以实现无刷新验证，即在用户输入时即时检查数据有效性，无需等待完整的表单提交，从而显著提升交互体验。 **一、AJAX基础** AJAX 是一种创建...

Magicbox
Global site tag (gtag.js) - Google Analytics