url不会显示在jquery

我只是写一个代码来显示一个URL点击一个按钮。以下是我对于编写的代码：url不会显示在jquery

<!DOCTYPE html> 
<html> 
<head> 
    <title>URL Shortener Service</title> 
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script> 
     $(document).ready(function(){ 
      $('#shortenit').click(sendURL); 
     }); 
     function sendURL(){ 
      var longurl = $('#longurl').val(); 
      $('#shorturl').html(longurl); 
     } 
    </script> 
</head> 
<body> 
    <h1 align="center">URL Display</h1> 
    <form align="center" id="urlform"> 
     <label>Please enter your long URL below</label><br /> 
     <input type = "text" id="longurl" name ="longurl"/><br /> 
     <input type = "submit" id="shortenit" value="Shorten"/> 
    </form> 
    <h3 align="center" id="shorturl"></h3> 
</body> 
</html>

在上面的代码中，当用户点击ID为#shortenit按钮会触发功能sendURL（）这需要#longurl值并将其打印在具有#shorturl id的标签中。

每当我输入一些URL（或文本），它只是显示一瞬间然后它消失。任何人都可以告诉我我错了哪里？

而我甚至试图使用jQuery $ .get（）方法将此URL发送到PHP，所以我确实需要获取URL。请告诉我如何。

来源

2014-09-20 Sai Karthik

取消表单提交 – mplungjan 2014-09-20 05:15:29

你必须使用类似event.preventDefault();的东西来中断你的提交事件，否则你的页面会被重新加载。

例（只是你的代码的JScript的一部分）：

$(document).ready(function() { 
    $('#shortenit').click(function (event) { 
     event.preventDefault(); 
     var longurl = $('#longurl').val(); 
     $('#shorturl').html(longurl); 
    }); 
});

...或者看看这个的jsfiddle：http://jsfiddle.net/r7fop9vk/1/

来源

2014-09-20 05:16:53 Bjoern

你需要不提交表单，我强烈建议你附加到表单提交事件，而不是点击

$(function() { 
    $("#urlform").on("submit",function(e) { 
    e.preventDefault(); // cancel submit 
    var longurl = $('#longurl').val(); 
    $('#shorturl').html(longurl); 
    }); 
});

来源

2014-09-20 05:19:34 mplungjan

Downvoting不加评论有助于NO ONE！ – mplungjan 2014-09-28 04:41:20

function sendURL(){ 
    var longurl = $('#longurl').val(); 
    $('#shorturl').html(longurl); 
    return false; 
}

如果输入类型为提交ŧ母鸡点击提交按钮它重新加载页面。重新加载longurl输入没有任何价值。

方式1： return false; //里面的sendUrl函数可以防止默认行为。例如，在提交事件中，它不提交表单。

方式2：更改输入类型=“提交”到类型=“按钮”//按钮不会提交表单。

来源

2014-09-20 05:55:17

试试这个：

<!DOCTYPE html> 
<html> 
<head> 
    <title>URL Shortener Service</title> 
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
     $('#shortenit').click(function (event) { 
      event.preventDefault(); 
      var longurl = $('#longurl').val(); 
      $('#shorturl').html(longurl); 
     }); 
     }); 
    </script> 
</head> 
<body> 
    <h1 align="center">URL Display</h1> 
    <form align="center" id="urlform"> 
     <label>Please enter your long URL below</label><br /> 
     <input type = "text" id="longurl" name ="longurl"/><br /> 
     <input type = "submit" id="shortenit" value="Shorten"/> 
    </form> 
    <h3 align="center" id="shorturl"></h3> 
</body> 
</html>

来源

2014-09-20 06:08:06

试试这个，如果你需要发送 “longurl” 使用$获得（）

<!DOCTYPE html> 
<html> 
<head> 
    <title>URL Shortener Service</title> 
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#urlform').submit(function (e) { 
       e.preventDefault(); 

       // sending form data with serialize() 
       // in "shorturl.php" get the longurl with $_GET["longurl"] to work it 
       $.get('shorturl.php', $(this).serialize(), function(response){ 
       // here response is a json object like { 'shorturl': 'someshorturl.com' } 
       $('#shorturl').html(response.shorturl); 
       }); 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <h1 align="center">URL Display</h1> 
    <form align="center" id="urlform"> 
    <label>Please enter your long URL below</label><br /> 
    <input type = "text" id="longurl" name ="longurl"/><br /> 
    <input type = "submit" id="shortenit" value="Shorten"/> 
    </form> 
    <h3 align="center" id="shorturl"></h3> 
</body> 
</html>

来源

2014-09-20 07:06:08 EverardH

url不会显示在jquery

回答

相关问题