javascript - 用 jquery 加载填充 div 中的值

标签 javascript jquery html css

<div class="row" id="user-details-div">

    <form id="add-user-form"  method="POST" >

        <div class="form-group">
            <input autocomplete="off" class="form-control" id="mobile" name="firstname" placeholder="Ad" type="text">
        </div>
        <div class="form-group">
            <div class="pwdMask">
                <input autocomplete="off" class="form-control" name="lastname" placeholder="Soyad" type="text">
            </div>
        </div>
        <button id="new-user-btn"  onclick="loadUserInfoView()" type="button">Ekle/Duzelt</button>
        <button id="new-user-btn"  onclick="saveUser()" type="button">Ekle/Duzelt</button>

    </form>
</div>

单击按钮时,我将另一个 div 放入该 div:

function loadUserInfoView() {
    //takes id and adds to url
    $("#user-details-div").load(url);
}

这里是这样

@GetMapping(value = "/{id}")
public String getUserById(Model model, @PathVariable("id") String id) {
    model.addAttribute("user", service.internalUserService.findById(Long.valueOf(id)));

    return "user-detail :: user-details";
}

这是用户详细信息 html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
</head>



    <div th:fragment="user-details">

        <table>
            <thead>
            <tr>
                <input type="text" th:field="*{user.firstname}">Ad</input><br>
                <input type="text" th:field="*{user.lastname}">Soyad</input><br>


                <button id="new-user-btn"  onclick="addEditUserInfo()" type="button">Ekle/Duzelt</button>
            </tr>
            </thead>
        </table>

    </div>

总而言之,有一个包含 2 个输入字段的表单。如果用户填写输入并单击添加按钮,它会发送帖子,但如果单击其他按钮,它会带来用户信息。它加载另一个 div。

但是另一个 div 也有与当前 div 相同的字段。

那么我可以一个一个地放置字段而不是放置 div 吗?

最佳答案

  1. user-detail.html:不要发送完整的 HTML 框架(doctypehtmlbody)。
  2. 通常使用数据语义格式(即 JSON)传输语义数据。因此,您将发送一个类似 {firstName:'Foo',lastName:'Bar'} 的 JSON,并使用 JS 客户端处理它以更新表单字段。
  3. 如果您不想这样做,您可以从加载的 HTML 中解析数据。例如:
$.ajax(url,{complete:function(data){
    var $fragment=$(data),
        firstName=$(':input[name=firstName]',$fragment).val(),
        lastName=$(':input[name=lastName]',$fragment).val(),
        $myForm=$('#user-details-div');
    $(':input[name=firstName]',$myForm).val(firstName);
    $(':input[name=lastName]',$myForm).val(lastName);
}})

关于javascript - 用 jquery 加载填充 div 中的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57321192/

相关文章:

javascript - jQuery PreventDefault() 如何删除同一点击事件中的内容

json - JavaScript MVC 解析 JSON

javascript - 如何从另一个 div 中的输入到达下一个 div

javascript - 在 Jquery 中,如何使内容默认隐藏?

jquery - 为什么 Chosen Select DropDown 位于页脚 DIV 下方

javascript - 使用 Html.TexBoxFor() 网页重新加载显示以前的输入文本而不是服务器的更新值

javascript - 如何将我的应用程序中的变量加载到 package.json 中?

javascript - 如何用另一个数组的元素替换数组中的元素

jQuery - 修改 HTML 字符串

javascript - 如何将 ms word 文档内容导入 ReactJS 组件?