Question

我找到了用户输入的地址的纬度和经度。我在按钮单击表单时调用jQuery函数。但是控制器方法是在这个jQuery函数之前执行的。我想要的是当用户点击提交按钮时，在调用成功控制器函数后调用jQuery函数。

查看：

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">           </script>
   <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
   <script type="text/javascript">
       function getCoordinates() {
           $("#sumbitBtn").click(function(){
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({ 'address': '#street' }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    alert("location : " + results[0].geometry.location.lat() + " " + results[0].geometry.location.lng());
                    $(selector).val(value)
                    var latitude = results[0].geometry.location.lat();
                    var longitude = results[0].geometry.location.lng();
                    $('latitude').val('latitude');
                    $('longitude').val('longitude');

                    $.ajax({
                        type: "POST",
                        dataType: 'json',
                        data: {

                            mylat: latitude,
                            mylang: longitude
                        },
                        url: "RentOutSpace/AddSpaces",
                        success: function (result) { success(result); }
                    });

                } else {
                    alert("Something got wrong " + status);
                }
            });
           });
    }

@using (Html.BeginForm("AddSpace","RentOutSpace","$.post()"))
{


@Html.ValidationSummary(true, "Please correct the errors and try again")

    @Html.EditorFor(model => model.latitude)
    @Html.EditorFor(model => model.longitude)
        <div class="editor-label">
        @Html.LabelFor(model => model.street)
        </div>
        <div class="editor-field">
        @Html.TextBoxFor(model => model.street)
        @Html.ValidationMessageFor(model => model.street)
        </div>

    <input type="submit" value="submit"  onclick="getCoordinates()" id="sumbitBtn"/>
}

控制器：

          [HttpPost]
          public ActionResult AddSpace(RentOutSpace rentModel, string lati, string lang)
          {
           rentModel.latitude = lati;
           rentModel.longitude = lang;


        Session.Store(rentModel);
        Session.SaveChanges();
        return View();
         }

Answer 1

只是阅读你的代码似乎正在执行。您只设置了另一个事件处理程序：

function getCoordinates() {
    $("#sumbitBtn").click(function(){
        var geocoder = new google.maps.Geocoder();
        ...
}

我认为您必须删除该行

$("#sumbitBtn").click(function(){

并关闭});以使其正常运行。

更新：这是在代码中显示错误的最小测试：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script type="text/javascript">
function getCoordinates() {
    console.log('onsubmit called!');
    $("#sumbitBtn").click(function(){

        console.log('$("#sumbitBtn").click() deleted!');
    });
}
</script>
</head>

<body>
    <input type="submit" value="submit"  onclick="getCoordinates()" id="sumbitBtn"/>
</body>
</html>

加载此代码并按下提交按钮，您将在控制台窗口中收到消息：

onsubmit called!

为了让它正常运行并显示第二条消息（而不是geocode()个功能，您必须删除$("#sumbitBtn").click(function(){并关闭部分。之后我们会收到两条消息：

onsubmit called!
$("#sumbitBtn").click() deleted!

如果您的代码在更改后无效，则表示存在其他错误。

Answer 2

首先你有你的功能：

function getCoordinates() {
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({ 'address': '#street' }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    alert("location : " + results[0].geometry.location.lat() + " " + results[0].geometry.location.lng());
                    $(selector).val(value)
                    var latitude = results[0].geometry.location.lat();
                    var longitude = results[0].geometry.location.lng();
                    $('latitude').val('latitude');
                    $('longitude').val('longitude');

                    $.ajax({
                        type: "POST",
                        dataType: 'json',
                        data: {

                            mylat: latitude,
                            mylang: longitude
                        },
                        url: "RentOutSpace/AddSpaces",
                        success: function (result) { success(result); }
                    });

                } else {
                    alert("Something got wrong " + status);
                }
            });

            return false;//prevent form submit
    }

然后你可以在元素onClick上附加javascript方式：

<input type="submit" value="submit"  onclick="getCoordinates()" id="sumbitBtn"/>

或者在单独的文件/部分上的jquery方式：

$(function(){//when the document is ready
    $("#sumbitBtn").click(getCoordinates);
});

jQuery onclick函数没有执行

2 个答案: