精华内容
下载资源
问答
  • 相信大家都遇到过浏览器表单提交的时候如果使用post和get是完全没有问题的,但是你使用delete和put...哈哈,不绕圈子了html表单,将put和delet请求伪装成post请求就可以了,关键是创建一个带有隐藏域并且meth...

    相信大家都遇到过在浏览器中表单提交的时候如果使用post和get是完全没有问题的,但是你使用delete和put方式提交,能够成功吗?

    目前html5和一些新的浏览器支持所有的http方法,但是不是全部浏览器都支持,这个时候你如果还是想通过浏览器进行提交该怎么办了?

     

    哈哈,不绕圈子了
    html表单中,将put和delet请求伪装成post请求就可以了,关键是创建一个带有隐藏域并且method为post的表单。例如下面:

    <form method="post">

         <input type="hidden" name="_method" value=“delete"/>

         .......

    </form>

     

    下面还有一种更简单的方式:

    当使用spring 的表单绑定库时,<sf:form>会让其变得更加简单。你可以讲method属性设置为期望的HTTP方法,<sf:form>将为你隐藏域:

    <sf:form method="delete" modelAttribute="spitter">

    </sf:form>

     

    当然你的服务器端还是应该做相应的配置。

    web.xml

    <filter>

       <filter-name>httpMethodFilter</filter-name>

       <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>

    </filter>

    <filter-mapping>

        <filter-name>httpMethodFilter</filter-name>

        <url-pattern>/*</url-pattern>

    </filter-mapping>

    这里我们将HiddenHttpMethodFilter匹配到/*模式,这样所有URL的请求在到达DispatcherServlet前都会经过HiddenHttpMethodFilter。

    注:通过非浏览器发送的请求以及RestTemplate发送的请求,没有必要包装成post,因此他们都支持所有的HTTP请求方式。

    展开全文
  • Lotus Forms本身支持提交按钮将自己提交到服务器端。但实际应用往往需要提交前进行一些操作,这些操作难以通过表单本身的提交按钮来触发,因此可以采用...我的思路是通过js api修改表单一个隐藏域,表单...

    Lotus Forms本身支持提交按钮将自己提交到服务器端。但在实际应用中往往需要在提交前进行一些操作,这些操作难以通过表单本身的提交按钮来触发,因此可以采用Html页面上的提交按钮来实现。

     

    实现思路是通过Lotus Forms提供的js api实现,但由于3.5.1的js api未将表单提交api发布出来,因此需要曲线救国。

     

    我的思路是通过js api修改表单中的一个隐藏域,表单中设计一个类型为done的action,这个action的active属性根据隐藏域的值进行变化,一旦隐藏域发生了变化action自动触发将表单提交到url上。代码如下:

    <script src="./js/LF_XFDL.js"></script>
    <script src="./js/LF_FormNodeP.js"></script>
    <script type="text/javascript">
    
    var objectID = "Main"; 
    
    function submit() {
      
        try {
        
        var value = "<sumbittrigger>true</sumbittrigger>";
          // set the value of the HIDDENYEAR field, which activates the compute
          ibmForms[objectID].updateXFormsInstance(null,"instance('INSTANCE')/sumbittrigger",
              null, value, XFDL.UFL_XFORMS_UPDATE_REPLACE);     
          
        } catch (error) {
          alert("Could not set up custom form\n\n" + error);
        }
    }
     
    </script>
    
    <input name="submit" type="button" onClick="submit();" value="submit" /> 

     

     

    表单设计

     

    <field sid="FIELD1">
             <xforms:textarea ref="instance('INSTANCE')/sumbittrigger">
                <xforms:label></xforms:label>
             </xforms:textarea>
             <itemlocation>
                <x>233</x>
                <y>110</y>
             </itemlocation>
             <scrollhoriz>wordwrap</scrollhoriz>
             <scrollvert>fixed</scrollvert>
          </field>
    
    <action sid="ACTION1">
              <delay>
             <type>once</type>
             <interval>0</interval>
          </delay>
             
                      <type>done</type>
             <url>http://forms.cdb.com:8080/FormsJSTC/FormView</url>
             <active compute="toggle(PAGE1.FIELD1.value) == '1' ? 'on' : 'off'">off</active>
             
          </action>

     

     

    FormView重载IBMWorkplaceFormsServerServlet,代码如下:

    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
    			throws ServletException, IOException {
    		
    		try {
    			this.useHTML(resp, true);
    			
    			String filePath = this.getServletContext().getRealPath("/Forms") + "/jsform.xfdl";
    			FileInputStream fis = new FileInputStream(filePath);
    			XFDL xfdl = IFSSingleton.getXFDL();
    			FormNodeP form = xfdl.readForm(fis, XFDL.UFL_SERVER_SPEED_FLAGS);
    			fis.close();		
    
    			ByteArrayOutputStream bos = new ByteArrayOutputStream();
    			form.writeForm(bos, null, 0);
    			
    			bos.writeTo(resp.getOutputStream());				
    			bos.close();
    
    			this.setFormName(resp, "Main");
    			resp.setContentType("application/vnd.xfdl");
    		} catch (UWIException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		}
    	
    	}
    	
    	@Override
    	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
    			throws ServletException, IOException {
    		resp.setContentType("text/html");
    		resp.getWriter().write("Success");
    	}
    
    
    

     通过以上这种方式,Lotus Forms可以专注于自己擅长的表单设计,而把与工作流交互的工作交给了html表单,大大的提高了表单的灵活性。

     

    展开全文
  • 隐藏表单技术

    2020-11-03 23:10:11
    编写JSP页面login.jsp,该页面通过表单向名字为login的Servlet对象(由LoginServlet 类负责创建)提交用户名,login 将用户名以隐藏表单的形式提交给另一个 Servlet 对象greet (由GreetServlet 类负责创建),...

    利用HTML的hidden属性,将客户端的信息,在用户不察觉的情形下,随着请求一起发送给服务器处理。例如

    :<input type="hidden" name="userID" value="15">

    编写JSP页面login.jsp,在该页面中通过表单向名字为login的Servlet对象(由LoginServlet 类负责创建)提交用户名,login 将用户名以隐藏表单域的形式提交给另一个 Servlet 对象greet (由GreetServlet 类负责创建),greet 将login.jsp 提交的用户名显示在浏览器中。login和greet是处理不同请求的Servlet,但是也可以实现会话跟踪。

    页面文件login.jsp的代码如下:

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>login.jsp</title>
    </head>
    <body>
    	<form action="login" method="post">
        	<table>
        		<tr>
        			<td>用户名:</td>
        			<td><input type="text" name="user"/></td>
        		</tr>
        		<tr>
        			<td><input type="submit" value="提交"/></td>
        		</tr>
        	</table>	
        </form>
    </body>
    </html>

    LoginSrevlet.java的代码如下:

    package servlet;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    
    import javax.servlet.ServletConfig;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    @WebServlet(name = "login", urlPatterns = { "/login" })
    public class LoginServlet extends HttpServlet {
    	private static final long serialVersionUID = 1L;
    
    	public void init(ServletConfig config) throws ServletException {
    		super.init(config);
    	}
    
    	public void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		response.setContentType("text/html;charset=UTF-8");
    		PrintWriter out = response.getWriter();
    		request.setCharacterEncoding("UTF-8");
    		String name = request.getParameter("user");
    		if (null == name || name.trim().length() == 0) {
    			response.sendRedirect("login.jsp");
    		}else{
    			out.println("<htm><head><title>第二个页面</title></head><body>");
    			out.println("<form action='greet' " + "method='post'>");
    			out.println("<input type='hidden' name='user' value=" + name +">");//隐藏表单域
    			out.println(name + "<br>");
    			out.println("<input type='submit' value='转向下一个页面看一看' >");
    			out.println("</form>");
    			out.println("</body></htm>");
    		}
    	}
    
    	public void doGet(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		doPost(request, response);
    	}
    }
    

    GreetServlet.java的代码如下:

    package servlet;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    
    import javax.servlet.ServletConfig;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    @WebServlet(name = "greet", urlPatterns = { "/greet" })
    public class GreetServlet extends HttpServlet {
    	private static final long serialVersionUID = 1L;
    
    	public void init(ServletConfig config) throws ServletException {
    		super.init(config);
    	}
    
    	public void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		response.setContentType("text/html;charset=UTF-8");
    		PrintWriter out = response.getWriter();
    		request.setCharacterEncoding("UTF-8");
    		String name = request.getParameter("user");
    		if (null == name || name.trim().length() == 0) {
    			response.sendRedirect("login.jsp");
    		}else{
    			
    			out.println("<htm><body>");
    			out.println("<br>您的姓名是:" + name);
    			out.println("<br><a href=login.jsp" + ">重新登录</a>");
    			out.println("</body></htm>");
    		}
    	}
    
    	public void doGet(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		doPost(request, response);
    	}
    }
    

    运行结果:

    展开全文
  • 如何创建一个隐藏域 ■如何创建一个密码域 如何创建一个文件上传域 ■如何创建一个多选框 如何创建一个单选框 ■如何创建一个文本区域 如何创建一个选择域和下拉菜单 ■如何创建一个表单按钮 如何创建表单标签 表单...
  • samrty+Ajax 请求生成json,xml,html响应

    千次阅读 2011-06-22 17:55:00
    本系列文章的第一篇,您将了解如何使用 Smarty 模板为 ... 您还将了解如何创建两个版本的表单,其中一个提供输入域让用户输入数据,另一个使用隐藏域并以不可编辑形式显示数据。通过单击一个按钮,用户能够切换两个

    在本系列文章的第一篇中,您将了解如何使用 Smarty 模板为 Ajax 请求生成 JSON、XML 和 HTML 响应。这些技术允许您在开发 PHP 代码时关注于应用逻辑,而这些应用逻辑是与 Ajax 客户端和服务器之间通信所使用的数据格式分离的。

    您还将了解如何创建两个版本的表单,其中一个提供输入域让用户输入数据,另一个使用隐藏域并以不可编辑形式显示数据。通过单击一个按钮,用户能够切换两个版本的表单,使用 Ajax 向服务器提交数据并获取用于更新页面的 HTML 内容。此外,这个表单在 Web 浏览器禁用 JavaScript 时仍然能够使用。

    本文的最后一部分包含配置 Smarty 和示例应用的说明。如果您的服务器或工作站启用了 SELinux,这个过程会有些复杂。这些信息对于需要修改公共文件的 Web 应用是很有用的,如内容管理系统和允许用户上传内容的网站。不管您使用的是 Smarty、流行 CMS 或定制系统,在您的代码尝试修改 Web 文件时,您都会遇到相同的与 SELinux 有关的配置问题。本文阐述了如何使用 Linux 的 restoreconchconsetsebool 命令解决这些问题。

    使用 Smarty 生成 Ajax 响应

    在本节中,我们将了解如何创建用来为 Ajax 请求生成响应的 Smarty 模板。您可以使用任何一种通用格式,如 JSON、XML 或 HTML。Smarty 语法主要是面向 HTML 设计的,这使它也非常适合于 XML。然而,使用 Smarty 创建 JSON 响应会有一些困难,因为模板构建的语法使用了 {} ,这意味着如果 JSON 使用了这两个字符,您需要对它们进行转义。然而,您会发现可以修改 Smarty 的分隔符以避免这个语法冲突。您还将了解如何创建自定义修饰符和函数,并将它们注册到 Smarty 框架,这样您就能够在您的模板中使用它们了。

    使用 Smarty 生成 XML 文档

    让我们从一个简单的例子(如清单 1 所示)开始,它将生成一个可以被 Ajax 客户端使用的 XML 响应。首先,PHP 代码应该设置内容类型以及 no-cache 响应头,它可以保证 Web 浏览器不会缓存 Ajax 响应。考虑到您以前可能没有使用过 Smarty,我们在这里简要介绍一下 demo_xml.php 文件的作用:它通过 require 包含了 Smarty 类,创建了这个类的一个实例,设置了它的编译和调试标记,使用 assign() 创建两个名为 root_attrelem_data 的变量,然后使用 display() 调用一个 Smarty 模板,这样就将生成了 XML 响应。


    清单 1. demo_xml.php 示例

    				
    <?php
    header("Content-Type: text/xml");
    header("Cache-Control: no-cache");
    header("Pragma: no-cache");
    
    require 'libs/Smarty.class.php';
    
    $smarty = new Smarty;
    
    $smarty->compile_check = true;
    $smarty->debugging = false;
    $smarty->force_compile = 1;
    
    $smarty->assign("root_attr", "< abc & def >");
    $smarty->assign('elem_data', array("111", "222", "333"));
    
    $smarty->display('demo_xml.tpl');
    
    ?>
    

     

    demo_xml.tpl 模板(见清单 2)生成了一个 <root> 元素,它有一个属性,它的值是从 demo_xml.php 文件的变量 root_attr 查询的。字符 <>"'& 分别使用 Smarty 的 escape 修饰词替换成 &lt;&gt;&quot;&apos;&amp; 。在 root 元素中,模板使用 Smarty 的 {section} 遍历 elem_data 数组的元素,这个数组是 demo_xml.php 文件中定义的第二个变量。demo_xml.tpl 会为数组中的每一个元素生成包含从数组查询到的值的 XML 元素。


    清单 2. demo_xml.tpl 模板

    				
    <root attr="{$root_attr|escape}">
        {section name="d" loop=$elem_data}
            <elem>{$elem_data[d]|escape}</elem>
        {/section}
    </root>
    

     

    清单 3 包含了由 demo_xml.php 文件和 demo_xml.tpl 模板生成的 XML 输出。


    清单 3. XML 输出

    				
    <root attr="&lt; abc &amp; def &gt;">
                <elem>111</elem>
                <elem>222</elem>
                <elem>333</elem>
    </root>
    

     

    使用 Smarty 创建一个 JSON 响应

    demo_json.php 文件(如清单 4 所示)设计了 no-cache 头,并且如清单 3 所示例子一样创建和配置了 Smarty 对象。此外,它还定义了两个名为 json_modifier()json_function() 的函数,它们会调用 json_encode() PHP 函数。这两个函数被注册到 Smarty 上,这样它们就可以在模板中使用了,您将在本节的后面看到如何使用。在这之后,demo_json.php 文件创建了一些以下类型的 Smarty 变量:字符串型、数字型、布尔型和数组。然后,PHP 例子执行 demo_json.tpl 模板生成 JSON 响应。


    清单 4. demo_json.php 示例

    				
    <?php
    header("Content-Type: application/json");
    header("Cache-Control: no-cache");
    header("Pragma: no-cache");
    
    require 'libs/Smarty.class.php';
    
    $smarty = new Smarty;
    
    $smarty->compile_check = true;
    $smarty->debugging = false;
    $smarty->force_compile = 1;
    
    function json_modifier($value) {
        return json_encode($value);
    }
    
    function json_function($params, &$smarty) {
        return json_encode($params);
    }
    
    $smarty->register_modifier('json', 'json_modifier');
    $smarty->register_function('json', 'json_function');
    
    $smarty->assign('str', "a/"b/"c");
    $smarty->assign('num', 123);
    $smarty->assign('bool', false);
    $smarty->assign('arr', array(1,2,3));
    
    $smarty->display('demo_json.tpl');
    
    ?>
    

     

    除了注册插件(如修饰符或函数)到 Smarty,您也可以使用 Smarty 文档中描述的一些特别的命名规范 (见 参考资料 )。然后您可以将您的代码放到 plug-ins 目录,这样您的 Smarty 修饰符和函数就可以在应用的任何 Web 页面中使用。

    因为 JSON 和 Smarty 的语法中都使用了 {} ,所以您必须在 Smarty 模板中使用 {ldelim}{rdelim} 生成 JSON 响应中使用的 {} 字符。您也可以将 {} 放到 {literal}{/literal} 之间。您将在另一个例子中看到,我们可以修改 Smarty 分隔符以避免这样的麻烦。

    demo_json.tpl 模板(见清单 5)使用 json 修饰符对 demo_json.php 文件中的四个变量值进行编码。例如,对引号和其它特殊字符进行转义是很有用的,如字符串中的制表符和换行符。Smarty 将会在 demo_json.php 文件中模板每次使用 |json 时调用 json_modifier()json 修饰符前面必须加上 @ 字符,这样数组变量就可以传递到 json_modifier() 。如果没有使用 @ 字符,修饰符函数会对数组的每一个元素进行调用。

    从 demo_json.tpl 模板构建的 {json ... } 会被转换成 demo_json.php 文件的 json_function() 的一个调用。这个函数会从模板中获取一个名为 params 的数组属性,同时被传递到 json_encode() ,这个函数会返回 JSON 表示的 PHP 数组。


    清单 5. demo_json.tpl 模板

    				
    {ldelim}
    	s: {$str|json},
    	n: {$num|json},
    	b: {$bool|json},
    	a: {$arr|@json},
    	o: {json os=$str on=$num ob=$bool oa=$arr},
    	z: {literal}{ x: 1, y: 2 }{/literal}
    {rdelim}
    

     

    清单 6 包含了由 demo_json.php 文件和 demo_json.tpl 模板生成的 JSON 输出。


    清单 6. JSON 输出

    				
    {
    	s: "a/"b/"c",
    	n: 123,
    	b: false,
    	a: [1,2,3],
    	o: {"os":"a/"b/"c","on":123,"ob":false,"oa":[1,2,3]},
    	z: { x: 1, y: 2 }
    }
    

     

    要避免在 Smarty 模板中使用 {ldelim}{rdelim} ,您可以修改如清单 7 所示的 Smarty 分隔符。


    清单 7. 修改 Smarty 分隔符

    				
    $smarty->left_delimiter = '<%';
    $smarty->right_delimiter = '%>';
    

     

    清单 8 所示的模板使用 Smarty 构件中的 <%%> 分隔符生成 JSON 响应。


    清单 8. demo_json2.tpl 模板

    				
    {
    	s: <% $str|json %>,
    	n: <% $num|json %>,
    	b: <% $bool|json %>,
    	a: <% $arr|@json %>,
    	o: <% json os=$str on=$num ob=$bool oa=$arr %>,
    	z: {  x: 1, y: 2 }
    }
    

     

    使用 Smarty 创建一个 Ajax

    本节的例子说明了如何使用 Smarty 生成使用 Ajax 获得的 HTML 内容。此外,这个 Web 页面也包含了一个 HTML 表单,这个表单的数据是使用 jQuery 框架以 Ajax 方式提交到服务器上的。如果 Web 浏览器禁用了 JavaScript,这个表单仍然会正确工作,Smarty 也仍然可用在服务器端生成内容。

    使用 Smarty 处理 HTML 表单

    demo_form.tpl 模板(见清单 9)包含了一个 HTML 表单,这个表单的域可能是可编辑的,也可能是不可编辑的,这取决于名为 edit_mode 的变量值。这个变量是在调用模板的 PHP 代码中设置的,您将会在本节的后面看到。edit_mode 的值也会被存储在表单的一个隐藏域中。


    清单 9. demo_form.tpl 模板的 HTML 表单

    				
    <form method="POST" name="demo_form">
    
    <input type="hidden" name="edit_mode" 
        value="{if $edit_mode}true{else}false{/if}">
    
    <table border="0" cellpadding="5" cellspacing="0">
        ...
    </table>
    
    </form>
    

     

    清单 10 显示的是表单的第一个域,如果 edit_modetrue ,它就是一个输入框;如果 edit_modefalse ,它就是一个隐藏域。在后一种情况中,这个域的不可编辑值会被 {$smarty.post.demo_text|escape} 包含在输出中。当用户提交这个可编辑表单时,参数 demo_text 包含了用户的输入。当表单是不可编辑的,由于有一个隐藏域,这个参数仍然会出现。因此,不管表单是否可以编辑,我们都可以使用 $smarty.post.demo_text 获得这个 post 参数的值。


    清单 10. demo_form.tpl 模板的文本框

    				
        <tr>
            <td>Demo Text:</td>
            <td>
                {if $edit_mode}
                    <input type="text" name="demo_text" size="20"
                        value="{$smarty.post.demo_text|escape}">
                {else}
                    <input type="hidden" name="demo_text" 
                        value="{$smarty.post.demo_text|escape}">
                    {$smarty.post.demo_text|escape}
                {/if}
            </td>
        </tr>
    

     

    这个表单的下一个输入域是一个复选框(见清单 11)。在可编辑的表单中,元素 input 只有在出现参数 demo_checkbox 时才会有一个属性 checked 。类似地,不可编辑的表单只有在所提交表单数据中包含了名为 demo_checkbox 的 post 参数时才会包含这个隐藏表单元素。


    清单 11. demo_form.tpl 模板的复选框

    				
        <tr>
            <td>Demo Checkbox:</td>
            <td>
                {if $edit_mode}
                    <input type="checkbox" name="demo_checkbox" 
                        {if $smarty.post.demo_checkbox}checked{/if}>
                {else}
                    {if $smarty.post.demo_checkbox}
                        <input type="hidden" name="demo_checkbox" value="On">
                    {/if}
                    {if $smarty.post.demo_checkbox}On{else}Off{/if}
                {/if}
            </td>
        </tr>
    

     

    表单的表格的下面一行包含了三个单选按钮(见清单 12)。模板代码通过比较参数 demo_radio 与每个按钮的值决定应该选择哪个单选按钮。不可编辑的表单使用一个隐藏输入域存储参数值并使用 $smarty.post.demo_radio 向用户显示这个值。


    清单 12. demo_form.tpl 模板的单选按钮

    				
        <tr>
            <td>Demo Radio:</td>
            <td>
                {if $edit_mode}
                    <input type="radio" name="demo_radio" value="1"
                        {if $smarty.post.demo_radio == '1'}checked{/if}>1
                    <input type="radio" name="demo_radio" value="2"
                        {if $smarty.post.demo_radio == '2'}checked{/if}>2
                    <input type="radio" name="demo_radio" value="3"
                        {if $smarty.post.demo_radio == '3'}checked{/if}>3
                {else}
                    <input type="hidden" name="demo_radio" 
                        value="{$smarty.post.demo_radio|escape}">
                    {$smarty.post.demo_radio|escape}
                {/if}
            </td>
        </tr>
    

     

    一个表单列表的选项是在一个循环的 {section} 中生成的,如清单 13 所示。当前循环的次数会被赋值给一个名为 demo_counter 的模板变量,它会与选项元素的值进行比较以便确定这个选项是否被选中。


    清单 13. demo_form.tpl 模板的列表

    				
        <tr>
            <td>Demo Select:</td>
            <td>
                {if $edit_mode}
                    <select name="demo_select" size="1">
                        {section name="demo_section" start=10 loop=100 step="10"}
                            {assign var="demo_counter"
                                value=$smarty.section.demo_section.index}
                            <option {if $smarty.post.demo_select == $demo_counter}
                                    selected{/if} value="{$demo_counter}">
                                {$demo_counter}
                            </option>
                        {/section}
                    </select>
                {else}
                    <input type="hidden" name="demo_select" 
                        value="{$smarty.post.demo_select|escape}">
                    {$smarty.post.demo_select|escape}
                {/if}
            </td>
        </tr>
    

     

    提交按钮会根据 edit_mode 标记(见清单 14)的不同值显示不同的标签(Save 或 Edit)。onclick 属性包含了一个名为 submitDemoForm() 的 JavaScript 函数调用。您将会在本文后面的内容中看到这一点,这个函数使用 Ajax 将表单数据提交到服务器,然后返回 false ,这样 Web 浏览器不会多次响应按钮的单击事件而提交相同的数据。然而,如果 JavaScript 被禁用了,submitDemoForm() 将不会被调用,而 Web 浏览器就会将表单提交到服务器上。因此,这个表单不管 JavaScript 是否启用都会生效。


    清单 14. demo_form.tpl 模板的提交按钮

    				
        <tr>
            <td>&nbsp;</td>
            <td>
                <button type="submit" οnclick="return submitDemoForm()">
                    {if $edit_mode}Save{else}Edit{/if}
                </button>
            </td>
        </tr>
    

     

    开发页面模板

    demo_page.tpl 文件(见清单 15)包含了两个 <script> 元素,其中一个是引用 jQuery,另一个是引用示例应用中的 JavaScript 文件。这个页面模板使用 Smarty 的 {include} 包含了元素 <div> 中的一个表单模板。


    清单 15. demo_page.tpl 模板

    				
    <html>
    <head>
        <title>Demo</title>
        <script type="text/javascript" 
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
        </script>
        <script type="text/javascript" src="demo_js.js">
        </script>
    </head>
    <body>
        <div id="demo_div">
            {include file="demo_form.tpl"}
        </div>
    </body>
    </html>
    

     

    为 Smarty 和 Ajax 创建一个 PHP 控制器

    demo_html.php 文件(如清单 16 所示)是 Ajax 和 Smarty 之间的桥梁,负责处理 Ajax 请求并在 demo_form.tpl 模板中使用 Smarty 生成 Ajax 响应,而这个模板只有当出现一个 Ajax 请求头时才会被调用。这个头是在 JavaScript 代码中设置的,您将在下面的小节中看到。如果没有 Ajax 头,这些代码就会使用 demo_page.tpl 模板,这意味着这是 Web 浏览器 的初始页面请求或 JavaScript 被禁用。在每一个请求中,edit_mode 标记的值都会转换成另一个可编辑表单,并且它是不可编辑的。


    清单 16. demo_html.php 示例

    				
    <?php
    header("Cache-Control: no-cache");
    header("Pragma: no-cache");
    
    require 'libs/Smarty.class.php';
    
    $smarty = new Smarty;
    
    $smarty->compile_check = true;
    $smarty->debugging = false;
    $smarty->force_compile = 1;
    
    $edit_mode = @($_REQUEST['edit_mode'] == "true");
    $smarty->assign("edit_mode", !$edit_mode);
    
    $ajax_request = @($_SERVER["HTTP_AJAX_REQUEST"] == "true");
    $smarty->display($ajax_request ? 'demo_form.tpl' : 'demo_page.tpl');
    
    ?>
    

     

    使用 Ajax 调用 Smarty 模板

    单击表单按钮时会调用 submitDemoForm() 函数(见清单 17)。这个函数会通过 jQuery 使用 POST 和 Web 表单的相同 URL 将表单数据发送到服务器。然后表单数据会被 jQuery 的 serialize() API 编码成一个字符串。在本例中,jQuery 在发送 Ajax 请求之前会调用 beforeSend() 函数设置 Ajax-Request 头,这个信息是服务器端用以确定 Ajax 请求的。在 Ajax 请求结束后,success() 函数会被调用。这个回调函数会将响应内容插入到 Web 页面的 <div> 元素中。


    清单 17. demo_js.js 示例

    				
    function submitDemoForm() {
        var form = $("form[name=demo_form]");
        $.ajax({
            type: "POST",
            url: form.action ? form.action : document.URL,
            data: $(form).serialize(),
            dataType: "text",
            beforeSend: function(xhr) {
                xhr.setRequestHeader("Ajax-Request", "true");
            },
            success: function(response) {
                $("#demo_div").html(response);
            }
        });
        return false;
    }
    

     

    在启用 SELinux 时建立 Smarty

    在解压缩示例应用后,您应该会看一个名为 ajaxsmarty 的目录,它包含了多个 PHP 文件、一个 JavaScript 文件和四个子目录:cache、configs、templates 和 templates_c。模板目录包含了示例应用的 Smarty 模板。其它三个子目录是空的。

    下载最新稳定版本的 Smarty (见 参考资料 ),然后解压缩它。(示例项目是在 Smarty 2.6.25 下测试的。)接下来,将 Smarty 的子目录 libs 复制到 ajaxsmarty 目录,这个目录是示例应用的主目录。

    将 ajaxsmarty 目录(同时包含示例应用和 Smarty 的 libs )上传或复制到 Apache 的 HTML 目录。如果您使用的是一个 Web 主机公司的服务器,SELinux 可能被禁用了,因为启用 SELinux 可能会有太多的支持呼叫。如果你在自己的 Linux 服务器上测试应用,您的服务器有可能启用了 SELinux,那么当浏览器请求一个 PHP 文件时您可能会得到下面的错误:“SELinux is preventing the httpd from using potentially mislabeled files.” 解决方法是以 root 身份运行清单 18 所示的命令。


    清单 18. 设置 Web 文件的安全性上下文(标签)

    				
    restorecon -R -v /var/www/html/ajaxsmarty
    

     

    至此,您应该能够在浏览器上打开地址:http://localhost/ajaxsmarty/,页面会显示三个链接。如果您单击其中一个链接,您会在 Web 浏览器上得到以下的 Smarty 错误:“Fatal error: Smarty error: unable to write to $compile_dir '/var/www/html/ajaxsmarty/templates_c'. Be sure $compile_dir is writable by the Web server user. in /var/www/html/ajaxsmarty/libs/Smarty.class.php on line 1113”。

    出现上面的错误是因为 Smarty 安装还没有完成。您必须给 Web 服务器写 templates_c 和 cache 目录的用户权限。实现这一步的正确做法是修改它们的拥有者,如清单 19 所示。注意 apache 用户名和服务器的 HTML 目录在您的计算机上可能会有所不同。


    清单 19. 修改两个目录的拥有者使 Smarty 能够创建文件

    				
    chown apache:apache /var/www/html/ajaxsmarty/templates_c 
    chown apache:apache /var/www/html/ajaxsmarty/cache 
    

     

    如果您不是使用 root 用户登录,您是不能使用 chown 修改 templates_c 和 cache 的写权限的。您可以通过使用 FTP 客户端修改,或者使用 chmod 命令将权限设置为 777。允许所有用户都能写这些文件夹不是一个非常好的做法,但是如果您不能使用 chown 命令,这是您唯一快速有效的方法。如果您的 Web 服务器是公共的,您应该联系服务器管理员帮您完成这个修改。

    如果您的计算机启用了 SELinux,您可能还会在浏览器上遇到这样的一个错误:“SELinux prevented httpd reading and writing access to http files.” 或 “SELinux is preventing httpd (httpd_t) write to ./templates_c (public_content_rw_t).” 解决方法是以 root 身份运行清单 20 中的命令。


    清单 20. 在启用 SELinux 时允许 Smarty 在它的目录中创建文件

    				
    chcon -t public_content_rw_t /var/www/html/ajaxsmarty/templates_c 
    chcon -t public_content_rw_t /var/www/html/ajaxsmarty/cache
    setsebool -P allow_httpd_anon_write=1
    

     

    带有 allow_httpd_anon_write 参数的 setsebool 命令必须只执行一次。它允许 httpd 守护进程将文件写到 public_content_rw_t 目录中。

    结束语

    在本文中,您了解了如何创建为 Ajax 请求产生 JSON、XML 和 HTML 响应的 Smarty 模板,如何使用 Smarty 创建一个即使在 Web 浏览器禁用 JavaScript 时仍然有效的 Ajax 表单,以及如何在启用 SELinux 的 Linux 主机上配置 Smarty。

     

    展开全文
  • 本系列文章的第一篇,您将了解如何使用 Smarty 模板为 ... 您还将了解如何创建两个版本的表单,其中一个提供输入域让用户输入数据,另一个使用隐藏域并以不可编辑形式显示数据。通过单击一个按钮,用户能够切换两个
  • 1 用户访问包含表单的页面 服务器这次会话 创建一个session对象 并产生一个令牌值 将这个令牌值作为隐藏输入值 随表单一起发送到客户端 同时将令牌值保存到session 2 用户提交页面 服务器端首先判
  • 然后再来看,表单有表单标签,这有很多种标签啊,什么文本框、密码框、隐藏域、复选框等等,所以说这篇博客应该不少东西,大家好好看 二、创建表单 创建表单,我们需要用到 FORM 标签,这就.
  • html入门到放弃笔记

    2018-05-15 15:06:12
    1、 htdoc 创建一个网页 01-first.html 文件 创建一个 记事本,将 .txt 重命名为 .html 2、搭建HTML网页结构 1、添加 文档类型声明 2、添加 html 根标记 2、<html> 标记 包含两对子元素 1、<...
  • XHTML表单

    2015-07-28 22:57:02
    XHTML的表单 网页文档中添加一堆标记对,就网页中创建了定义了一个表单 标记有如下的最小格式: 使用输入控件 HTML支持多种输入控件,包括文本和口令字段、复选...select 和option :二者组合使用,创建一个
  • 同时session中创建一个唯一的token,和隐藏表单元素token一致;并表单第一次提交成功后删掉该token,当重复提交表单时,将token和session中的token值比较,若相同,则提交通过,若不成功,则不通过; ...
  • 每种方案后给出一个简单的实例,能够让读者和我一起敲代码,直观地理解这些跨域技巧</li></ol> 如果觉得本文有帮助,可以点 star 鼓励下,本文所有代码都可以从 github 仓库下载,...
  • 1.7.1 创建一个Java Web项目 1.7.2 将图片输出到JSP页面之 1.8 疑难解惑 1.8.1 Tomcat端口被占用导致不能启动 1.8.2 Eelipse没有创建JSP项 1.9 精彩回顾 第2章 JavaWeb开发必修课 ——JSP语法 2.1 本章学习任务...
  • 1.7.1 创建一个Java Web项目 1.7.2 将图片输出到JSP页面之 1.8 疑难解惑 1.8.1 Tomcat端口被占用导致不能启动 1.8.2 Eelipse没有创建JSP项 1.9 精彩回顾 第2章 JavaWeb开发必修课 ——JSP语法 2.1 本章学习任务...
  • ASP.NET的网页代码模型及生命周期

    热门讨论 2009-07-28 14:22:11
    创建一个单文件页模型,【文件】按钮选择【新建文件】选项,弹出对话框选择【Web窗体】或右击当前项目,下拉菜单选择【添加新建项】选项即可创建一个.aspx页面,如图4-2所示。 图4-2 创建单文件页...
  •  1.4 编写第一个HTML文件 8  1.4.1 HTML文件的编写方法 8  1.4.2 手工编写页面 9  1.4.3 使用可视化软件制作页面 10  1.4.4 使用浏览器浏览HTML文件 14  1.4.5 使用HTML开发的明日图书网 14  1.5 小结 15  ...
  • 7.2.4 隐藏域 118 7.2.5 复选框 119 7.2.6 单选按钮 119 7.2.7 选择域 119 7.2.8 文件域 120 7.2.9 按钮 120 7.2.10 图像域 120 7.3 了解HTML 5表单 125 7.3.1 HTML表单的发展 125 7.3.2 HTML 5新增表单...
  •  《ios web应用开发:运用html5、css3与javascript》的重点是使用html5、css3 及javascript 等web 标准来为ios 做设计与开发,主题围绕为apple 移动设备设计界面和开发应用的完整流程而展开,并实现了一个名为“the...
  • jQuery详细教程

    2013-04-25 14:16:42
    您也许已经注意到我们的实例的所有 jQuery 函数位于一个 document ready 函数: $(document).ready(function(){ --- jQuery functions go here ---- }); 这是为了防止文档完全加载(就绪)之前运行 jQuery...
  • 理解作用链是Js编程中一个必须要具备的,作用决定了变量和函数有权力访问哪些数据。Web浏览器,全局执行环境是window对象,这也意味着所有的全局变量或者方法都是window对象的属性或方法...
  • JavaScript王者归来

    2013-01-10 11:30:48
    11.3.2.1 模拟对话框--创建一个窗口对话框及一个对话框阻塞进行的例子 11.3.2.2 showModalDialog和showModelessDialog--非W3C或ECMAScrip标准 11.3.3 状态栏 11.4 框架--上层的Window对象 11.4.1 多框架应用 11.4.2 ...
  • 声明方法的存在而不去实现它的类被叫做抽象类(abstract class),它用于要创建一个体现某些基本行为的类,并为该类声明方法,但不能该类实现该类的情况。不能创建abstract 类的实例。然而可以创建一个变量,其...
  • visio教程PDF

    热门讨论 2010-05-17 23:56:22
    7.2.1 创建一个例子 7.2.2 使用Edit Undo方法 7.2.3 使用标准工具栏Undo控件 7.2.4 使用键盘撤消命令 7.3 使用Redo命令 7.3.1 使用Edit Redo方法 7.3.2 使用标准工具栏的Redo控制 7.3.3 ...
  • 本书是第I卷,以开发人员项目开发经常遇到的问题和必须掌握的技术为中心,介绍了应用Java Web进行程序开发的各个方面的知识和技巧,主要包括Java Web编程基础、文件操作管理、图形图像与多媒体技术、窗体应用...
  • asp.net知识库

    2015-06-18 08:45:45
    ASP.NET 2.0 中创建 Web 应用程序主题 ASP.NET 2.0 中的数据访问 ASP.NET 2.0:弃用 DataGrid 吧,有新的网格控件了! 将 ASP.NET 2.0 应用程序服务配置为使用 SQL Server 2000 或 SQL Server 2005 ASP.NET 2.0 ...
  • word使用技巧大全

    热门讨论 2011-03-18 20:37:53
    1、如何同一文档中创建不同的页眉 53 2、如何去除页眉中的横线 53 二十五、电子图书馆文章转为Word文档 54 1、PDF文件的识别 54 2、caj文件的识别: 55 3、超星文件的识别: 55 4、其他情况下的识别: 55 二十六、...
  • PROJECT 2007宝典 9/9

    2012-04-01 19:13:00
    无论是正在为小团队管理一个项目,还是监督一个数百人的协作分配项目,Microsoft Project 2007的强大功能和本书所提供的完善的详细信息,能够使您保持项目顺利进行。从设置预算到分配资源,再到跟踪结果,本书的7个...
  • 实例163 默默无闻——隐藏域(HiddenField控件) 266 实例164 页面提交时弹出确认窗口 266 实例165 配置自定义HTTP处理程序 267 实例166 HTTP模块 269 实例167 利用PostBackUrl属性实现页面传值 270 实例168 Table...
  • 实例163 默默无闻——隐藏域(HiddenField控件) 266 实例164 页面提交时弹出确认窗口 266 实例165 配置自定义HTTP处理程序 267 实例166 HTTP模块 269 实例167 利用PostBackUrl属性实现页面传值 270 实例168 Table...

空空如也

空空如也

1 2 3 4 5
收藏数 84
精华内容 33
关键字:

在html中创建一个隐藏域