html表单数据为啥不能提交到servlet

Posted 2023-05-09

参考技术A 先检查一下web.xml里的<servlet>里的<serlver-name>和<serlvet-class>

然后再看看<servlet-mapping>里的<url-pattern>有没有不一样的地方，再看一下你提交的url是不是和<url-pattern>一样

如果再不行，加我QQ：418986240
或者把你的项目打包发到[e-mail] 参考技术B 1、检查表单的action是否写的正确
2、看看web.xml中的servlet属性有没有正确配置
3、获取是否正确，一般是读取参数，不是属性本回答被提问者采纳 参考技术C 你看看你有没有提交表单，是否用的是超链接或伪协议。 参考技术D jsp提交，jsp里面同样可以套用html标签 第5个回答  2010-03-25 请把你的问题描述清楚,以便于别人帮你解决问题.
html表单提交到servlet当然是没有任何问题的,具体要看你是怎么做的,很有可能就是路径问题.

为啥每次将新条目提交到表单时我的 HTML 页面都会重新加载？

【中文标题】为啥每次将新条目提交到表单时我的 HTML 页面都会重新加载？

【英文标题】：Why is my HTML page reloading every time a new entry is submitted into a form?为什么每次将新条目提交到表单时我的 HTML 页面都会重新加载？

【发布时间】：2019-10-22 12:23:11

【问题描述】：

我的 HTML 页面有问题。我的程序旨在使用表格收集姓名，然后将它们输出到表格下方的表格中。当页面没有重新加载时，它能够做到这一点。

当我第一次输入某个名称时，页面会重新加载。页面重新加载后，我输入了相同的名称，以后按回车键就不会重新加载。我不知道这是为什么，也不知道如何解决。

这里是链接的JS文件

// Gloabal Variables
var enteredName,
  countOutput,
  count,
  table,
  form,
  allNames = [];

function project62Part2() 
  // Your code goes in here.
  function getElements() 
    form = document.getElementById("nameForm");
    countOutput = document.getElementById("numNames");
    table = document.getElementById("table");
  

  function addName() 
    enteredName = form.name.value;
    allNames.push(enteredName);
  

  function countNames() 
    // Reset count
    count = 0;

    // Loop through and count names
    for (i = 0; i < allNames.length; i++) 
      count++;
    
  

  function output() 
    // Reset table
    table.innerHTML = "<tr><th>Names</th></tr>";
    // Display count
    countOutput.innerHTML = "Total names entered: " + count;

    // Loop through and add to table display
    for (i = 0; i < allNames.length; i++) 
      table.innerHTML += "<tr><td>" + allNames[i] + "</td></tr>";
    
  

  // Call code
  getElements();
  addName();
  countNames();
  output();

  // Prevent page from reloading
  return false;

<form id="nameForm" action="#">
  <label class="formLabel" for="name">Name: </label>
  <input id="name" name="name" />

  <input type="submit" name="runExample" value="Submit" class="formatSubmit" onclick="project62Part2()" />
</form>

<div id="numNames">Total names entered: </div>

<table id="table"></table>

我对编码的理解充其量只是初步的，所以虽然我很感激任何答案，但我希望它保持简单！

【问题讨论】：

只使用 JavaScript 自己：formElement.onsubmit = project62Part2;

【参考方案1】：

<input type='submit'> 导致页面刷新。将其替换为<input type='button'>。

阅读更多here。

        // Gloabal Variables
    var enteredName,
    	countOutput,
    	count,
        table,
    	form,
    	allNames = [];
    
    function project62Part2() 
        // Your code goes in here.
        function getElements() 
    		form = document.getElementById("nameForm");
    		countOutput = document.getElementById("numNames");
    		table = document.getElementById("table");
    	
        
    	function addName() 
    		enteredName = form.name.value;
    		allNames.push(enteredName);
    	
    	
    	function countNames() 
    		// Reset count
    		count = 0;
    		
    		// Loop through and count names
    		for (i = 0; i < allNames.length; i++) 
    			count++;
    		
    	
    	
    	function output() 
    		// Reset table
    		table.innerHTML = "<tr><th>Names</th></tr>";
    		// Display count
    		countOutput.innerHTML = "Total names entered: " + count;
    		
    		// Loop through and add to table display
    		for (i = 0; i < allNames.length; i++) 
    			table.innerHTML += "<tr><td>" + allNames[i] + "</td></tr>";
    		
    	
    	
    	// Call code
    	getElements();
    	addName();
    	countNames();
    	output();
    
    	// Prevent page from reloading
    	return false;
    

    <form id="nameForm" action="6.2projectpart2.html#">
        <label class="formLabel" for="name">Name: </label>
        <input id="name" name="name" />
        
        <input type="button" name="runExample" value="Submit" class="formatSubmit" onclick="project62Part2()" />
    </form>
    
    <div id="numNames">Total names entered: </div>
    
    <table id="table"></table>

【参考方案2】：

您可以从<input type="submit" name="runExample" />更改为

<input type="button" name="runExample" />

或

删除输入标签上的onclick="project62Part2()"并移动到表单标签onsubmit="return project62Part2()"

<form id="nameForm" onsubmit="return project62Part2()">

【参考方案3】：

有很多方法可以实现这一点，我将解释两种方法：

1。添加Event.preventDefault()方法

每当您单击submit 类型的<input> 元素时，用户代理都会尝试将表单提交到表单中的URL 设置。

现在，preventDefault() 方法告诉用户代理，如果事件没有得到显式处理，则不应像通常那样采取其默认操作。这意味着Form 接口不会重新加载页面。

这个怎么运作？ 好吧，只需将事件变量添加到您的 submit 调用中，如下所示：

<input type="submit" name="runExample" value="Submit" class="formatSubmit" onclick="project62Part2(event)" />

然后将event参数添加到project62Part2()方法中。

function project62Part2(event) 
   event.preventDefault();

   ...

// Gloabal Variables
var enteredName,
  countOutput,
  count,
  table,
  form,
  allNames = [];

function project62Part2(event) 
   event.preventDefault();
  // Your code goes in here.
  function getElements() 
    form = document.getElementById("nameForm");
    countOutput = document.getElementById("numNames");
    table = document.getElementById("table");
  

  function addName() 
    enteredName = form.name.value;
    allNames.push(enteredName);
  

  function countNames() 
    // Reset count
    count = 0;

    // Loop through and count names
    for (i = 0; i < allNames.length; i++) 
      count++;
    
  

  function output() 
    // Reset table
    table.innerHTML = "<tr><th>Names</th></tr>";
    // Display count
    countOutput.innerHTML = "Total names entered: " + count;

    // Loop through and add to table display
    for (i = 0; i < allNames.length; i++) 
      table.innerHTML += "<tr><td>" + allNames[i] + "</td></tr>";
    
  

  // Call code
  getElements();
  addName();
  countNames();
  output();

  // Prevent page from reloading
  return false;

<form id="nameForm" action="#">
  <label class="formLabel" for="name">Name: </label>
  <input id="name" name="name" />

  <input type="submit" name="runExample" value="Submit" class="formatSubmit" onclick="project62Part2(event)" />
</form>

<div id="numNames">Total names entered: </div>

<table id="table"></table>

2。将input 替换为button

这是基于前面的解释。如果submit 类型的<input> 元素触发了提交调用，那么如果将其替换为button 类型，则不会触发提交调用。如果您正在处理服务器调用，我建议您这样做以维护submit。

这个怎么运作？ 好吧，只需将类型从 submit 替换为 button，如下所示：

<input type="button" name="runExample" value="Submit" class="formatSubmit" onclick="project62Part2()" />

// Gloabal Variables
var enteredName,
  countOutput,
  count,
  table,
  form,
  allNames = [];

function project62Part2() 
  event.preventDefault();
  // Your code goes in here.
  function getElements() 
    form = document.getElementById("nameForm");
    countOutput = document.getElementById("numNames");
    table = document.getElementById("table");
  

  function addName() 
    enteredName = form.name.value;
    allNames.push(enteredName);
  

  function countNames() 
    // Reset count
    count = 0;

    // Loop through and count names
    for (i = 0; i < allNames.length; i++) 
      count++;
    
  

  function output() 
    // Reset table
    table.innerHTML = "<tr><th>Names</th></tr>";
    // Display count
    countOutput.innerHTML = "Total names entered: " + count;

    // Loop through and add to table display
    for (i = 0; i < allNames.length; i++) 
      table.innerHTML += "<tr><td>" + allNames[i] + "</td></tr>";
    
  

  // Call code
  getElements();
  addName();
  countNames();
  output();

  // Prevent page from reloading
  return false;

<form id="nameForm" action="#">
  <label class="formLabel" for="name">Name: </label>
  <input id="name" name="name" />

  <input type="button" name="runExample" value="Submit" class="formatSubmit" onclick="project62Part2()" />
</form>

<div id="numNames">Total names entered: </div>

<table id="table"></table>

【参考方案4】：

尝试在 project62Part2 上添加一个事件参数，然后在里面做一个 event.preventDefault()