首页 > 程序开发 > web前端 > HTML/CSS >

Modal模态框使用ajax向后台传数据和文件之modal复用

2017-11-09

Modal模态框使用ajax向后台传数据和文件之modal复用。

Modal模态框使用ajax向后台传数据和文件之modal复用,昨天把添加计划概要写完了,那么今天要开始添加计划了,经理开始催了,好急好急!!?! 那么添加计划从哪里开始呢,我们的前段已经编辑好了,像这样的: \
OK,重点是天数,我们要先取到天数才行,那么天数之前已经给出了,在第一页上,我们直接用Jquery来取天数的值,因为之前有设置天数的标识位,所以直接赋值到这个标识位上:

$(document).ready(function(){
      $("#days").change(function(){
        var x = $("#days").val();
        $("#index_day").val(x);
      });
    });

当#days的值发生改变时,把#days的值赋给index_day。
我们看一下是不是真的能把值赋过去,这里写图片描述
看到这里都是空的,接下来我们在天数里输入值:
\
可以看到value变成了5,OK一个五天计划就设置好了,
进入天计划后会有每步计划,这个每步计划同样用刚才的方法来获取:
每天计划的源代码:

 <table>
                  <tr>
                    <td valign="top"  class="addmain">
                      <b>今日计划:</b>
                    </td>
                    <td colspan="3" valign="top">
                      <input type="text" name="step" id="step">
                    </td>
                  </tr>
                  <tr class="addmain">
                    <td>
                      <b>时长:</b>
                    </td>
                    <td align="left">
                      <input  type="text" name="step_day" id="step_day">
                    </td>
                    <td>
                      <b>步骤:</b>
                    </td>
                    <td align="right">
                      <input  type="text" name="step_num" id="step_num">
                    </td>
                  </tr>
                  <tr class="addmain">
                    <td valign="top">
                      <b>所需物品:</b>
                    </td>
                    <td colspan="3">
                      <textarea id="need">

                      </textarea>
                    </td>
                  </tr>
                </table>

JS代码:

 $(document).ready(function(){
      $("#step_day").change(function(){
        var x = $("#step_day").val();
        $("#index_step").val(x);
      });
    });

测试看看:

这里写图片描述
这样我们就把第一天的计划数取到了,然后就要保证modal能循环显示你输入步骤数的次数。
简单的看,第一次输入完天数后,下边有第一步的内容,html源代码:

<table>
                  <tr class="addmain">
                    <td valign="top"  class="addmain"><b>小标题:</b></td>
                    <td align="left"><input type="text" name="" id=""></td>
                    <td valign="top"><b>配合产品:</b></td>
                    <td align="right"><input type="text" name="" id=""></td>
                  </tr>
                  <tr class="addmain">
                    <td valign="top"><b>要点:</b></td>
                    <td colspan="3"><input type="text" name=""></td>
                  </tr>
                  <tr class="addmain">
                    <td valign="top"  class="addmain"><b>美容工具:</b></td>
                    <td align="left"><input type="text" name="" id=""></td>
                    <td valign="top"><b>部位:</b></td>
                    <td align="right"><input type="text" name="" id=""></td>
                  </tr>
                  <tr class="addmain">
                    <td valign="top"  class="addmain"><b>注意事项:</b></td>
                    <td align="left"><input type="text" name="" id=""></td>
                    <td valign="top"><b>护肤小贴士:</b></td>
                    <td align="right"><input type="text" name="" id=""></td>
                  </tr>
                  <tr class="addmain">
                    <td valign="top"  class="addmain"><b>休息时间:</b></td>
                    <td align="left"><input type="text" name="" id=""></td>
                    <td valign="top"><b>休息方式:</b></td>
                    <td align="right"><input type="text" name="" id=""></td>
                  </tr>
                  <tr>
                    <td valign="top" class="addmain"><b>添加图片:</b></td>
                    <td colspan="3">
                    <p class="upstep">
                      <p>步骤图<br/>300*200px</p>
                      <input type="text" size="20" name="upfile3" id="upfile3">  
                      <input type="button" value="选择图片" onclick="path3.click()">  
                      <input type="file" id="path3" onchange="upfile3.value=this.value">
                    </p>

                    <p class="upstep">
                      <p>配合产品图<br/>160*160px</p>
                      <input type="text" size="20" name="upfile4" id="upfile4">  
                      <input type="button" value="选择图片" onclick="path4.click()">  
                      <input type="file" id="path4" onchange="upfile4.value=this.value">
                    </p>

                    <p class="upstep">
                      <p>每步视频<br/>50M以内</p>
                      <input type="text" size="20" name="upfile5" id="upfile5">  
                      <input type="button" value="选择图片" onclick="path5.click()">  
                      <input type="file" id="path5" onchange="upfile5.value=this.value">
                    </p>
                    </td>

                  </tr>
                </table>

如此,这些都填好之后,就是隐藏上边那个天数的table,给#next_step按钮绑定事件, onclick=”modaltoggle()” ,然后写入方法:

  function modaltoggle(){
    /**
    *TODO
    *此处各种ajax上传
    */
    $("#inputday").hide();


  }

到了下一天我们需要把这个隐藏的东西再打开,怎么计算是否到了下一天呢?我们先在js中做一个标识位,把他定义为ind_step,赋值为1,代表现在是第一步,每一次重新打开就要+1,写作:ind_step++,当ind_step的值等于步骤数时,表示今天的步骤完成,重新给他赋值为1:

while(ind_step==step){
    $("#inputday").show();
      ind_step = 1;
    }

注意要写在隐藏的下边,然后我们还要继续打开modal框:

$(&#39;#myModalday&#39;).modal(&#39;show&#39;);

目前完整代码为:

function modaltoggle(){
    var step = $("#index_step").val();
    var ind_step = 1;

    /**
    *TODO
    *此处各种ajax上传
    */
    $("#inputday").hide();
      ind_step++;
    while(ind_step==step){
    $("#inputday").show();
      ind_step = 1;
    }
    $(&#39;#myModalday&#39;).modal(&#39;show&#39;);
  }

先测试一下,不行,因为每次点击都会访问函数,然后给ind_step重新赋值为1,这个我们可以通过alert(ind_step)查看。
那么,我们需要把ind_step变为静态变量才可以,而js中并没有提供静态变量,我们可以把var ind_step=1; 移到函数体外部,作为全局变量来使用。
把ind_step++;移到while循环下边。
把modal提交按钮中的data-dismiss=”modal”属性删掉,然后我们就可以把函数中显示modal的代码段去除。
此时代码是:

 var ind_step = 1;

  function modaltoggle(){
    var step = $("#index_step").val();
    /**
    *TODO
    *此处各种ajax上传
    */
    $("#inputday").hide();

      alert(ind_step);
    while(ind_step==step){
    $("#inputday").show();
      ind_step = 1;
    }
    ind_step++;
  }

测试一下,输入3,在第三次之后成功显示了上方的table。再测试第二天的,所有数据不变,当第二次显示时候输入4。

从第二天起,alert出来的不是1而是2?为什么呢?
答案在方法中,我们把while循环放在了ind_step++上方,所以设为1之后,ind_step又+1了,那么问题来了,下方不能放,放在上方行吗?看效果;
放在上方,第二天提交时就会显示,比我们预定的少一次,之前我们应该遇到了这个问题,我没有说,放while中更不可能。
把while改成if条件语句试试看:

if(ind_step==step){
    $("#inputday").show();
      ind_step = 1;
    }else{
      ind_step++;
    }

这下可以了!
步骤搞定了,下边就是天数,计算到没到我们预定的天数,到了天数的时候我们先做自动关闭modal,即

$(&#39;#myModalday&#39;).modal(&#39;hide&#39;);

当到天数时,我们就运行这段代码。

同ind_step一样,我们先设定一个ind_day为全局变量,赋值1。
在方法中取index_day的值:

var day = $("#index_day").val();

当ind_step重设为1时,ind_day+1,表示进入下一天,然后是判断ind_day是否到预期值,在ind_day++;后加入判断:

 if(ind_day>day){
        $(&#39;#myModalday&#39;).modal(&#39;hide&#39;);
        return;
      }

当当前天数大于预设时,隐藏modal,退出方法,测试。
测试结果是成功的,但是之前输入的数据还在,影响到下一次输入,所以当if判断成功时,我们直接reload网页把。
测试可用,目前代码:

var ind_step = 1;
  var ind_day = 1;
  function modaltoggle(){
    var step = $("#index_step").val();
    var day = $("#index_day").val();
    /**
    *TODO
    *此处各种ajax上传
    */
    $("#inputday").hide();

      alert(ind_step);

    if(ind_step==step){
    $("#inputday").show();
      ind_step = 1;
      ind_day++;
      if(ind_day>day){
        $(&#39;#myModalday&#39;).modal(&#39;hide&#39;);
        location.reload();
      }
    }else{
      ind_step++;
    }

  }

目前来看,我们的基本框架就搭建完成了,是吗?你的表单里的数据清了吗?
接下来我们做一个方法,专门用作清空表单里的数据。

第一步:清步骤计划

 function clean_step(){
    $("#add_step input").val("");
  }

偷了个懒,这个是每一次执行循环都要调用,加入方法中。
再加入

$("#add_step input[type=button]").val("选择图片");

因为他把我button上的字也清了,我再加上!
完整如下,亲测可用:

  function clean_step(){
    $("#add_step input").val("");
    $("#add_step input[type=button]").val("选择图片");
  }

第二步:清理当天计划

如上方法一样,只是多了一个需要额外清除:

  function clean_day(){
    $("#inputday input").val("");
    $("#inputday textarea").html("");
  }

测试可用。

没有第三部啦,那么这下应该是把框架搭好了吧。
下边就是数据传递了!

相关文章
最新文章
热点推荐