`

ajax提交表单

 
阅读更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
   
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   
    <!-- easyui的样式 -->
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.3.1/themes/default/easyui.css">
    <!-- 小图标的样式 -->
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.3.1/themes/icon.css">
   
    <script type="text/javascript" src="../js/jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="../js/jquery-easyui-1.3.1/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js"></script>
 
 <script type="text/javascript">
  var loginAndRegDialog;
  $(function(){
   loginAndRegDialog = $('#loginAndRegDialog').dialog({
    closable:false,
    modal : true,
    buttons : [{
     text : '登录',
     handler : function(){
      $.ajax({
       type : "POST",
       url : 'http://localhost:81/sdsweb/userMgr/user/login.action',
       data : {
        uname : $('#loginAndRegDialog input[name=name]').val(),
        password : $('#loginAndRegDialog input[name=password]').val()
       },
       //data : $('loginAndRegForm').serialize(),

        //dataType指定以后,r的值就是对应的类型,比如dataType指定成json以后,jquery就会把返回的字符串转换成json对象,r也就是json对象了
       dataType : 'text',

       success : function(r){
        alert(r);
       },
       error : function(){
        //$.messager.alert('Warning','The warning message','error');

          //从右下角慢慢弹出来
        $.messager.show({
         title : '提示',
         msg : '登录失败'
        });
       }
      });
     }
    },{
     text : '注册',
     handler : function(){
      alert("注册");
     }
    }]
   });
  });
 </script>
 
  </head>
 
  <body>

   //用dialog的形式展现表单
  <div id="loginAndRegDialog" class="easyui-dialog" title="用户登录" style="top:100px;width:400px;height:200px;">
   <form id="loginAndRegForm">
    <table>
     <tr>
      <th>
       用户名
      </th>
      <td>
       <input name="name" />
      </td>
     </tr>
     <tr>
      <th>
       密码
      </th>
      <td>
       <input name="password" type="password" />
      </td>
     </tr>
    </table>
   </form>
   
  </div>
 </body>
</html>

分享到:
评论

相关推荐

    利用ajax提交表单完整流程

    本文将详细介绍如何利用AJAX提交表单的完整流程,以实现更加流畅和用户友好的交互体验。 ### 1. 创建HTML表单 首先,我们需要创建一个HTML表单,它包含了用户输入的数据和一个用于触发AJAX提交的按钮。例如: ```...

    ajax提交表单到后台

    ### 一、前端:使用jQuery的AJAX提交表单 1. **引入jQuery库**:首先确保在HTML文件中引入了jQuery库。可以使用CDN链接或本地文件,例如: ```html &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;...

    ajax提交表单小例子

    在“ajax提交表单”这个场景中,我们需要关注的是POST请求,因为表单提交通常涉及到向服务器发送数据。以下是使用JavaScript实现的一个简单例子: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;AJAX提交表单示例 请...

    vue12ajax提交表单

    在本教程中,我们将深入探讨如何在Vue 1.x和2.x版本中使用Ajax提交表单。 **Vue 1.x 和 Vue 2.x 的核心差异** Vue 2.x 对于Vue 1.x进行了一些关键性的改进,包括优化性能、引入虚拟DOM以及对组件API的调整。然而,...

    jq ajax提交表单

    完整的jq ajax提交表单,奖解压后jq文档加入页面中,调用就可惟了。 表单结构 &lt;form id="myForm" action="comment.php" method="post"&gt; Name: &lt;input type="text" name="name" /&gt; Comment: &lt;...

    Asp+ajax提交表单实例

    接下来,我们将深入探讨Asp+Ajax提交表单的实例,以及如何实现这一功能。 首先,我们需要理解Ajax的核心概念。Ajax并非一种编程语言,而是利用JavaScript、XMLHttpRequest对象和DOM(Document Object Model)来实现...

    完成的 Ajax 提交表单

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

    使用jQuery ajax提交表单代码

    在“使用jQuery ajax提交表单代码”的资源中,我们可以期待看到一个清晰的示例,展示如何将表单数据发送到服务器,并处理响应。 1. **jQuery的$.ajax()函数** - **基本语法**:`$.ajax({ options });` - **选项...

    AJAX提交表单内容

    一、AJAX提交表单基础 1. **异步性**:AJAX的核心是XMLHttpRequest对象,它可以在后台与服务器通信,而不会干扰用户的界面操作。这意味着用户可以继续浏览页面,而数据正在后台处理。 2. **JSON与XML**:虽然最初...

    ajax提交表单插件ajaxform.js

    这是一个ajax提交表单插件,支持文件上传,用起来非常方便。具体使用说明 http://blog.csdn.net/qq122453418/article/details/79511164 欢迎留言

    Lavarel框架中使用ajax提交表单的方法

    开门见山,因为laravel以post形式提交数据时候需要加{{csrf_field()}}防止跨站攻击,所以当你用ajax提交表单时候自然也要加。 在网上看了很多的解决方式,我是用下面这种方法解决的: 1,首先在模板里面加上一个meta : ...

    AJAX提交表单数据实例分析

    在本文中,我们将通过一个实例来分析如何使用AJAX提交表单数据,并深入探讨其实现原理和技巧。 首先,我们需要注意AJAX请求的两种主要类型:GET和POST。GET请求通常用于从服务器检索数据,而POST请求则通常用于向...

    ajax提交url与ajax提交表单的详细比较

    总结来说,Ajax提交URL适用于简单且少量的数据交互,而Ajax提交表单更适合处理包含多个字段的复杂表单数据,能够提供更好的用户体验。在实际应用中,开发者应根据具体需求选择合适的方法,并注意处理可能出现的错误...

    ajax提交form表单和上传图片

    本教程将详细讲解如何利用jQuery、jQuery Form插件以及Spring MVC框架来实现Ajax提交表单并上传图片。通过这种方式,用户无需等待页面刷新,即可完成操作,提升了交互性。 首先,`jquery.js` 是jQuery库的核心文件...

    jQuery使用$.ajax提交表单完整实例

    本文实例讲述了jQuery使用$.ajax提交表单的方法。分享给大家供大家参考,具体如下: 首先,新建Login.html页面: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

    ajax提交form表单

    1. **安全性**:使用Ajax提交表单时需要注意安全问题,如CSRF攻击,确保请求是来自合法的来源。 2. **用户体验**:虽然同步请求可以立即得到结果,但会阻塞UI,降低用户体验。推荐使用异步请求。 3. **错误处理**:...

    非常简单的ajax表单提交

    jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传.

    Ajax使用jQuery提交表单 文件

    在这个“Ajax使用jQuery提交表单 文件”中,我们将探讨如何利用jQuery实现Ajax提交表单,从而实现异步数据传输,提高用户体验。 首先,我们需要理解jQuery中的Ajax函数`$.ajax()`。这是一个核心函数,可以进行各种...

    thinkPHP5 ajax提交表单操作实例分析

    其中,使用AJAX实现无刷新数据交互是一个关键技术点,本文将详细介绍ThinkPHP5中如何使用AJAX提交表单,并提供相关的实例分析。 首先,要进行AJAX表单提交,我们通常使用jQuery提供的ajax()方法。这个方法可以让...

Global site tag (gtag.js) - Google Analytics