Question

我只是编写代码来点击按钮显示网址。以下是我为此编写的代码：

<!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。

的标记中

每当我输入一些网址（或文字）时，它只会显示一瞬间，然后就会消失。谁能告诉我哪里出错了？

我甚至尝试使用jQuery $ .get（）方法将此URL发送到PHP，因此我确实需要获取该URL。请告诉我怎么做。

Answer 1

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

如果提交输入类型，则单击提交按钮将重新加载页面。在重新加载时，longurl输入没有任何值。

方式1： return false; //在sendUrl函数内部阻止默认行为。例如，在提交事件中，它不提交表单。

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

Answer 2

您必须使用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/

Answer 3

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

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

Answer 4

试试这个：

<!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>

Answer 5

如果您需要发送＆＃34; longurl＆＃34;请尝试此操作使用$ .get（）

<!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>

url不在jquery中显示

5 个答案: