ajax异步提交数据动态更改select选项

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="../jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<script type="text/javascript">
    $(function(){
        // $("select[name=‘projectName‘]")

      $("#projectName").change(function(event) {
          /* Act on the event */
            $("#projectName").find(‘option:selected‘).text();
      var projectId=$("#projectName").find(‘option:selected‘).val();
   $.ajax({
                  url:‘package_usb_submit.php‘,
                  type: ‘post‘,
                  dataType: ‘text‘,
                  data:‘contents=‘+projectId,
                  success: function (data) {
                          // console.log(data)
                          var jsonObj=eval("("+data+")");
                          // console.log(jsonObj);
                          // console.log(jsonObj[‘content‘]);
                          var jsonArr=jsonObj[‘content‘];
                          var option;
                          $("#version").empty();
                          for (var i = 0; i<jsonArr.length; i++) {
                                  console.log(jsonArr[i].desc);

                                 option = $("<option>").val(jsonArr[i].ver).text(jsonArr[i].desc);
                              $("#version").append(option);

                          }

                      }

                  })

           })

      });
    // })

</script>
<body>
   <div align="center">

    <form action="package_usb_submit.php" method="get" accept-charset="utf-8">
       <table>
           <tbody>
               <tr>
                   <td>打包版本:</td>

                   <td>
                   <select name="projectName" id="projectName">
                    <?php
                      for ($i=0; $i <3 ; $i++) {
                          echo "<option value=‘$i‘>";
                          echo  "$i";
                          echo "</option>";
                      }
                    ?>
                    </select>
                   </td>

                   <td>
                    <select name=‘version‘ id=‘version‘>
                        <?php
                          for ($i=0; $i <5 ; $i++) {
                                   echo "<option value=‘$i‘>";
                                  echo  "$i";
                                  echo "</option>";
                          }
                        ?>
                    </select>
                   </td>

        </tr>
           </tbody>
       </table>
       <input type="submit" name="" value="OK">
    </form>

   </div>

</body>
</html>

后台数据返回:

<?php 

  // print_r($_REQUEST);
   switch ($_REQUEST[‘contents‘]) {
       case 0:
           echo ‘{"content":[{"ver":"10","desc":"abc"},{"ver":"12","desc":"abcd"}] }‘;
           break;
       case 1:
           echo ‘{"content":[{"ver":"1","desc":"abc"},{"ver":"2","desc":"abcd"}] }‘;
           break;
       default:
           # code...
           break;
   }

?>
时间: 2024-10-12 02:02:38

ajax异步提交数据动态更改select选项的相关文章

jQuery选取所有复选框被选中的值并用Ajax异步提交数据

昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来批量提交复选框数据,今天用到了就分享一下. 由于我做的项目一些地方比较复杂,这里我只举一个小例子,能理解就好. 首先,我做了一个简单的多个复选框的界面,如图: 这是一个比较简单的多个复选框提交界面.代码如下: 1 <body> 2 <div> 3 <input type=&quo

JQuery中使用FormData异步提交数据和提交文件

web中数据提交事件是常常发生的,但是大多数情况下我们不希望使用html中的form表单提交,因为form表单提交会中断当前浏览器的操作并且会调到另一个地址(即使这个地址是当前页面),并且会重复加载一些html浪费带宽,我们希望达到一个无刷新的.异步的提交效果来给用户更好的体验,这时候就要使用ajax,ajax可以不依赖表单自行发起一次http请求并且取回服务器响应的数据,这就是ajax的简便之处.我们这里使用JQuery中封装好的ajax函数,更加简便.下面列举几个使用ajax异步提交数据的方

Ajax.BeginForm的异步提交数据 简介

Html.BeginForm与Ajax.BeginForm都是MVC架构中的表单元素,它们从字面上可以看到区别,即Html.BeginForm是普通的表单提交,而Ajax.BeginForm是支持异步的表单提交,这对于我们开发者来说是一个福音,我们不用再自己去用JQ代码了,直接用MVC自代的Ajax.BeginForm就可以很容易的完成一个异步的表单提交动作. Html.BeginForm的原型解释: 1 @using (Html.BeginForm()) {} //提交到当前页面 2 3 @u

AJAX异步提交,浏览器总跳出下载界面

问题: 我在写一个网页的“用户登录”部分时,要将用户名和密码传到后端验证,想在前端用了AJAX异步提交功能,将 用户名密码传到后端,然后后端返回验证结果.但AJAX写好后每次刷新网页都会跳出下载窗口,起初以为是 AJAX传输的数据格式出了问题,导致浏览器误以为后台传来的数据是下载内容(这么猜测的),于是 换了xml,txt,jaon 等格式试了个遍,最后还是没解决.后来翻到这篇帖子,才明白: http://www.jb51.net/article/32540.htm,我们先看看我的代码: 下面是

ASP.NET MVC 网站开发总结(五)——Ajax异步提交表单之检查验证码

首先提出一个问题:在做网站开发的时候,用到了验证码来防止恶意提交表单,那么要如何实现当验证码错误时,只是刷新一下验证码,而其它填写的信息不改变? 先说一下为什么有这个需求:以提交注册信息页面为例,一般注册都需要用户填一个验证码信息(防止机器恶意注册),并且这个验证码会提交到后台去进行比对,若是错了则不会检查其他提交信息而直接返回浏览器端提示验证码错误.若是简单地用form表单直接将数据提交到指定的url,当验证码填写错误的信息返回浏览器端的时候,不可避免整个页面都会重新刷新一次,这是用户所不想要

Ajax异步提交登录(2)--登录使用

http://cjp1989.iteye.com/blog/1740964 1.Ajax的原理: Ajax的原理就是:通过javascript的方式,将前台数据通过xmlhttp对象传递到后台,后台在接收到请求后,将需要的结果,再传回到前台,这样就可以实现不需要页面的转发,数据实现来回传递,从而实现页面无刷新. 基于这个原理,我想到使用Ajax传输登录的信息,包括错误信息,功能很强大,保证绝对的用户友好型. 2.使用Ajax异步提交登录可以实现功能:可以提示用户名错误,可以提示用户名正确但是密码

项目中使用的ajax异步读取数据结构设计

设计稍微复杂了一点,完成ajax读取功能涉及到了很多页面.虽然如此,但感觉比较灵活. 和传统方法唯一的区别在于多了一层数据容器控件,里面提供了显示数据的HTML元素及相应的JS方法. 这样数据控件指生成纯数据. ajax异步读取 使用了jQuery.ajax,通过ajax POST方式请求后台处理ashx页面,并传递相关参数. ashx 完成动态加载用户控件,并根据接收的参数对控件的属性进行赋值. 加载控件,借助于博客园老赵的一篇博文,链接找不到了,以后再补. public class View

form表单submit提交内容,跟ajax异步提交form表单的区别,

因为开发一个小细节,本来是上传文件,填写文件名进行ajax提交,但是没有获取到文件的绝对地址, 所以使用了form表单提交文件,然后又觉得form表单+ajax提交联系起来比较好,不用改动太多代码. 区别: Form表单提交:一般都会进行页面跳转: Ajax异步提交:可以不进行页面跳转: Form表单提交 <body> <div id="forms”> <form id="form1" action="/users/login"

ASP.NET MVC 第三章 异步提交数据

好长时间都没写文章了本来不准备在写文章了,但是我又为什么今天发表文章咧,第一是为了我自己对技术的认识.第二是为了新手不知道怎么去学习MVC写次系列文章. 废话结束吧,接下来我们看看怎么异步实现提交数据到按钮.本章就是为了WebForm用惯了事件驱动.(此处注明下有很多自认为高手的连事件都不懂是什么,不说懂就算了,直接上MVC吧) 我们根据第二章的修改路由代码接着写,此处因为本人PC不在安装VS2010所以就直接用VS2013了,不在说明怎么创建MVC的示例了.这里我使用MVC4,后面会跟大家一起